Wednesday 7 September 2016
PRESTASHOP THUMBNAIL WITH HOVER EFFECT
-----------------------------------------------------------------------------------------------------------
PRESTASHOP THUMBNAIL WITH HOVER EFFECT
STEP1: GO INSIDE IN BELOW LINK FILE
STEP2; PASTE BELOW CODE IN global.css
C:\wamp\www\PrestaShop\themes\default-bootstrap\css\global.css
-------------------------------------------------------------------------------------------------------------------
HIGHLIGHTED CODE TAKEN FROM MICROSOFT WORD:
-------------------------------------------------------------------------------------------------------------------
#home-page-tabs > li
a {
background-color:Gold;
color:Gold;
font-size:16px;
font-style:Bold;
border-radius: 100px;
}
.blocknewproducts a {
background-color:LimeGreen;
border:none;
color:Gold;
cursor:pointer;
display:inline-block;
font-family:"Lobster Two", Georgia, serif;
font-size:16px;
font-style:Bold;
font-weight:500;
letter-spacing:0;
line-height:26.4px;
margin:4px 2px;
padding:15px 32px;
text-align:center;
text-decoration:none;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.blocknewproducts a :hover {
background: red; /* For browsers that
do not support gradients */
background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow, green);
border-radius: 0 0 0 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
.homefeatured a {
background-color:#f44336;
border:none;
color:White;
cursor:pointer;
display:inline-block;
font-family:"Lobster Two", Georgia, serif;
font-size:16px;
font-style:Bold;
font-weight:500;
letter-spacing:0;
line-height:26.4px;
margin:4px 2px;
padding:15px 32px;
text-align:center;
text-decoration:none;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.homefeatured a :hover {
border-radius: 0 0 0 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
.blockbestsellers a {
background-color:Blue;
border:none;
color:White;
cursor:pointer;
display:inline-block;
font-family:"Lobster Two", Georgia, serif;
font-size:16px;
font-style:Bold;
font-weight:500;
letter-spacing:0;
line-height:26.4px;
margin:4px 2px;
padding:15px 32px;
text-align:center;
text-decoration:none;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.blockbestsellers a :hover {
border-radius: 0 0 0 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
.blockspecials a {
background: red; /* For browsers that
do not support gradients */
background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow, green);
border:none;
color:White;
cursor:pointer;
display:inline-block;
font-family:"Lobster Two", Georgia, serif;
font-size:16px;
font-style:Bold;
font-weight:500;
letter-spacing:0;
line-height:26.4px;
margin:4px 2px;
padding:15px 32px;
text-align:center;
text-decoration:none;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.blockspecials
a li:hover {
border-radius: 0 0 0 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
-------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------
PRESTASHOP THUMBNAIL WITH HOVER EFFECT - YouTube
https://www.youtube.com/watch?v=QXBUHlqCyeo
17 mins ago - Uploaded by SAVE MONEY
http://fbgadgets.blogspot.co.uk/2016/09/prestashop-thumbnail-with-hover-effect.------------------------------------------------------------------------------------------------------------------
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment