CodePen Embed - CSS3 Hover Effects

<h1>01</h1><img class="image1" src="http://static.james-star.com/images/preview/james-star-056.jpg" alt="">


<h1>02</h1>
<div class="container2">
<img class="image2" src="http://static.james-star.com/images/preview/james-star-056.jpg" alt="">
</div>





<h1>03</h1>
<div class="container3">
<img class="image3" src="http://static.james-star.com/images/preview/james-star-056.jpg" alt="">
</div>





<h1>04</h1>
<img class="image4" src="http://static.james-star.com/images/preview/james-star-056.jpg" alt="">




<h1>05</h1>
<img class="image5" src="http://static.james-star.com/images/preview/james-star-056.jpg" alt="">






<h1>06</h1>
<img class="image6" src="http://static.james-star.com/images/preview/james-star-056.jpg" alt="">




<h1>07</h1>
<img class="image7" src="http://static.james-star.com/images/preview/james-star-056.jpg" alt="">



<h1>08</h1>
<img class="image8" src="http://static.james-star.com/images/preview/james-star-056.jpg" alt="">



<h1>09</h1>
<img class="image9" src="http://static.james-star.com/images/preview/james-star-056.jpg" alt="">





<h1>10</h1>
<img class="image10" src="http://static.james-star.com/images/preview/james-star-056.jpg" alt="">




<h1>11</h1>
<div class="container11">
<img class="image11" src="http://static.james-star.com/images/preview/james-star-056.jpg" alt="">
</div>




<h1>12</h1>
<div class="container12">
<div class="carddiv12">
<img class="frontofcard12" src="http://static.james-star.com/images/preview/james-star-056.jpg" alt="img">
<p class="backofcard12">Text</p>
</div>
</div>






<h1>13</h1>
<img class="image13" src="http://static.james-star.com/images/preview/james-star-056.jpg" alt="">




<h1>14</h1>
<div class="container14">
<img class="image14" src="http://static.james-star.com/images/preview/james-star-056.jpg" alt="">
  <div class="textbox14">
<p class="text14">TEXT</p>
  </div>
</div>





<h1>15</h1>
<div class="container15">
<img class="image15" src="http://static.james-star.com/images/preview/james-star-056.jpg" alt="">
<div class="textbox15">
<p class="text15">TEXT</p></div></div>




<h1>16</h1>
<div class="container16">
<img class="image16" src="http://static.james-star.com/images/preview/james-star-056.jpg" alt="">
<div class="textbox16">
<p class="text16">TEXT</p></div></div>




<h1>17</h1>
<div class="container17">
<img class="image17" src="http://static.james-star.com/images/preview/james-star-056.jpg" alt="">
<div class="textbox17">
<p class="text17">TEXT</p></div></div>

.image1:hover {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
.image1 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}



.container2:hover .image2 {
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
.container2 {
overflow:hidden;
width:200px;
height:150px;}
.image2 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
-webkit-transform:scale(1);
transform:scale(1);}






.container3:hover .image3 {
-webkit-transform:scale(1);
transform:scale(1);}
.container3 {
overflow:hidden;
width:200px;
height:150px;}
.image3 {
-webkit-transform:scale(1.3);
transform:scale(1.3);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}





.image4:hover {
border-radius:50%;
box-shadow: 0 10px 6px -6px grey;}
.image4 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}




.image5:hover {
border-top-left-radius: 120px; 
border-bottom-right-radius: 120px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;}
.image5 {
border-bottom-left-radius: 120px;
border-top-right-radius: 120px; 
border-bottom-right-radius: 15px;
border-top-left-radius: 15px; 
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}



.image6:hover {
border-top-left-radius: 30px 120px; 
border-bottom-right-radius: 30px 120px;
border-bottom-left-radius: 15px; 
border-top-right-radius: 15px;}
.image6 {
border-top-left-radius: 15px; 
border-top-right-radius: 120px 30px; 
border-bottom-left-radius: 120px 30px;
border-bottom-right-radius: 15px;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}




.image7:hover {
-webkit-box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, .75);
box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, .75);}
.image7 {
-webkit-box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}





.image8:hover {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);}
.image8 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}



.image9:hover {
-webkit-transform: skew(0deg,20deg);
transform: skew(0deg,20deg);}
.image9 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}






.image10:hover {
-webkit-transform: translate(20px,-50px);
transform: translate(20px,-50px);
opacity: 0.4;}
.image10 {
opacity: 1;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}





.container11:hover .image11{
-webkit-transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform: rotateY(180deg);
transform-style: preserve-3d;}
.container .image, .container:hover .image11 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}






.carddiv12 {
width:200px; height:150px; position:relative;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 100% 75px;
-webkit-transition: all 0.7s ease;
transform-style: preserve-3d;
transform-origin: 100% 75px;
transition: all 0.7s ease;}
.container12:hover .carddiv12 {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);}
.frontofcard12, .backofcard12 {
width:200px; height:150px; position:absolute; left:0; 
-webkit-backface-visibility:hidden;
backface-visibility:hidden;}
.backofcard12 {
padding-top:50px;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);}







.image13:hover {
-webkit-box-shadow: 0px 0px 15px 15px #fff;
box-shadow: 0px 0px 15px 15px #fff;
border-radius:50%;
opacity: 0.6;
-webkit-transform: rotate(720deg);
transform: rotate(720deg);}
.image13 {
opacity: 1;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}






.container14 {
position:relative;}
.textbox14:hover {
opacity:1;}
.text14 {
color: #fff;
padding-top: 50px;}
.textbox14 {
width:200px;
height:150px;
position:absolute;
top:0;
left:0;
opacity:0;
border-radius:5px;
background-color: rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);
box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}





.container15 {
position:relative;}
.container15 .textbox15 {
width:200px;
height:150px;
position:absolute;
top:0;
left:0;
-webkit-transform: scale(0);
transform: scale(0);
border-radius:5px;
background-color: rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);
box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);}
.container15:hover .textbox15 {
-webkit-transform: scale(1);
transform: scale(1);}
.text15 {
  color: #fff;
padding-top: 50px;}
.textbox15 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}






.container16 {
position:relative;
overflow:hidden;}
.container16 .textbox16 {
width:200px;
height:150px;
position:absolute;
top:0;
left:0;
margin-top:-160px;
border-radius:5px;
background-color: rgba(0,0,0,0.75);
-webkit-box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);}
.container16:hover .textbox16 {
margin-top:0;}
.text16 {
padding-top: 50px;
color: #fff;
}
.textbox16 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}




.container17 {
position:relative;
overflow:hidden;
width:200px;
height:150px;}
.container17 .textbox17 {
position:absolute;
top:0;
left:0;
width:200px;
height:150px;
margin-left:-210px;}
.container17:hover .textbox17 {
margin-left:0;}
.container17 img {
margin-left:0;}
.container17:hover img {
margin-left:210px;}
.text17 {
padding-top: 50px;
color: #000;
}
.container17 img, .textbox17 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}

This Pen is owned by vavik on CodePen.

See more by @vavik96 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.