PRESTASHOP THUMBNAIL WITH HOVER EFFECT

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) ;

}

-------------------------------------------------------------------------------------------------------------------