CodePen Embed - MwKvbj

 changes changes<h1>18</h1>
<div class="container18">
<img class="image2" src="http://static.james-star.com/images/preview/james-star-020.jpg" alt="">
<img class="image1" src="http://static.james-star.com/images/preview/james-star-021.jpg" alt="">
</div>





<h1>19</h1>
<div class="container19">
<img src="http://static.james-star.com/images/preview/james-star-020.jpg" alt="img5">
<img src="http://static.james-star.com/images/preview/james-star-019.jpg" alt="img4">
<img src="http://static.james-star.com/images/preview/james-star-018.jpg" alt="img3">
<img src="http://static.james-star.com/images/preview/james-star-017.jpg" alt="img2">
<img src="http://static.james-star.com/images/preview/james-star-016.jpg" alt="img1">
<p class="hovertext">Hover here</p>
</div>






<h1>20</h1>
<div class="container20">
<img src="http://static.james-star.com/images/preview/james-star-020.jpg" alt="img10">
<img src="http://static.james-star.com/images/preview/james-star-019.jpg" alt="img9">
<img src="http://static.james-star.com/images/preview/james-star-018.jpg" alt="img8">
<img src="http://static.james-star.com/images/preview/james-star-017.jpg" alt="img7">
<img src="http://static.james-star.com/images/preview/james-star-016.jpg" alt="img6">
<p class="hovertext">Hover here</p>
</div>







<h1>21</h1>
<div class="shakeit">
<img src="http://static.james-star.com/images/preview/james-star-021.jpg" alt="">
</div>





<h1>22</h1>
<div class="container22 changes">

<p class=" hovertext">Hover here</p>
</div>






<h1>23</h1>
<div class="container23">
<textarea class="textarea" placeholder="Your thoughts here">
</textarea>
  </div>




<h1>24</h1>
<div class="container24 outer"> <div class="inner">
Content with test-linebreaks: <br><br><br><br><br><br><br> Content ends here</div> </div>





</br></br></br></br>
<h1>25</h1>
<div class="container25">
<img src="http://static.james-star.com/images/preview/james-star-017.jpg" alt="">
<div class="tooltip25">
<p class="tooltiptxt">Got it!</p></div></div>

.container18 {
position:relative;
width:200px;
height:150px;}
.container18 img {
position:absolute;
top:0;
left:0;
-webkit-transition: opacity 1.1s ease;
transition: opacity 1.1s ease;}
.container18:hover .image1 {
opacity:0;}







.container19 {
position:relative; width:200px; height:150px;}
.container19 img {
position:absolute; top:0; left:0;}
.container19:hover img {
-webkit-animation-name: slider;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: slider;
animation-timing-function: ease;
animation-duration: 10s;
animation-iteration-count: infinite;}
@-webkit-keyframes slider {
0% {opacity:1;} 20% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;}}
@keyframes slider {
0% {opacity:1;} 20% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;}}
.container19 img:nth-child(1) {-webkit-animation-delay: 8s; animation-delay: 8s;}
.container19 img:nth-child(2) {-webkit-animation-delay: 6s; animation-delay: 6s;}
.container19 img:nth-child(3) {-webkit-animation-delay: 4s; animation-delay: 4s;}
.container19 img:nth-child(4) {-webkit-animation-delay: 2s; animation-delay: 2s;}
.container19 img:nth-child(5) {-webkit-animation-delay: 0s; animation-delay: 0s;}






.container20 {
position:relative; width:200px; height:150px;}
.container20 img {
position:absolute; top:0; left:0; opacity:0;}
.container20:hover img {
-webkit-animation-name: slider; -webkit-animation-timing-function: ease;
-webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite;
animation-name: slider; animation-timing-function: ease;
animation-duration: 10s; animation-iteration-count: infinite;}
@-webkit-keyframes slider {
0% {opacity:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);}
20% {opacity:1;-webkit-transform: rotate(0) scale(1) skew(0deg,0deg);}
30% {opacity:0;-webkit-transform: rotate(-360deg) scale(0) skew(0deg,0deg);}
100% {opacity:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);}}
@keyframes slider {
0% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);}
20% {opacity:1;transform: rotate(0) scale(1) skew(0deg,0deg);}
30% {opacity:0;transform: rotate(-360deg) scale(0) skew(0deg,0deg);}
100% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);}}
.container img:nth-of-type(1) {-webkit-animation-delay: 8s;animation-delay: 8s;}
.container20 img:nth-of-type(2) {-webkit-animation-delay: 6s;animation-delay: 6s;}
.container20 img:nth-of-type(3) {-webkit-animation-delay: 4s;animation-delay: 4s;}
.container20 img:nth-of-type(4) {-webkit-animation-delay: 2s;animation-delay: 2s;}
.container20 img:nth-of-type(5) {-webkit-animation-delay: 0s;animation-delay: 0s;}

.container20 .hovertext {
position: absolute; top:60px; left:30px;
font-size:1.5em; color: rgba(0,0,0,1);
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
.container20:hover .hovertext {
top:20px; color: rgba(255,255,255,0);
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}






@-webkit-keyframes shakeit {
0% { -webkit-transform: rotate(0deg) translate(2px, 1px); }
10% { -webkit-transform: rotate(2deg) translate(1px, 2px); }
20% { -webkit-transform: rotate(-2deg) translate(3px, 0px) ; }
30% { -webkit-transform: rotate(0deg) translate(0px, -2px); }
40% { -webkit-transform: rotate(-2deg) translate(-1px, 1px); }
50% { -webkit-transform: rotate(2deg) translate(1px, -2px); }
60% { -webkit-transform: rotate(0deg) translate(3px, -1px); }
70% { -webkit-transform: rotate(2deg) translate(-2px, -1px); }
80% { -webkit-transform: rotate(-2deg) translate(1px, 1px); }
90% { -webkit-transform: rotate(0deg) translate(-2px, -2px); }
100% { -webkit-transform: rotate(2deg) translate(-1px, 2px); }}
@keyframes shakeit {
0% { transform: rotate(0deg) translate(2px, 1px); }
10% { transform: rotate(2deg) translate(1px, 2px); }
20% { transform: rotate(-2deg) translate(3px, 0px) ; }
30% { transform: rotate(0deg) translate(0px, -2px); }
40% { transform: rotate(-2deg) translate(-1px, 1px); }
50% { transform: rotate(2deg) translate(1px, -2px); }
60% { transform: rotate(0deg) translate(3px, -1px); }
70% { transform: rotate(2deg) translate(-2px, -1px); }
80% { transform: rotate(-2deg) translate(1px, 1px); }
90% { transform: rotate(0deg) translate(-2px, -2px); }
100% { transform: rotate(2deg) translate(-1px, 2px); }}
.shakeit img:hover {
-webkit-animation-name: shakeit;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-name: shakeit;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;}


.container22 .hovertext {
position: absolute; top:60px; left:30px;
font-size:1.5em; color: rgba(0,0,0,1);
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
.container22:hover .hovertext {
top:20px; color: rgba(255,255,255,0);
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}





.container22 {
position:relative; width:200px; height:150px;}
.container22 img {
position:absolute; top:0; left:0; opacity:0;}
.container22:hover img {
-webkit-animation-name: slider; -webkit-animation-timing-function: ease;
-webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite;
animation-name: slider; animation-timing-function: ease;
animation-duration: 10s; animation-iteration-count: infinite;}


@-webkit-keyframes changes {
0% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;}
10% {box-shadow: 0px 0px 15px #2F4F4F; background-color: #0000FF;}
20% {box-shadow: 0px 0px 15px #800080; background-color: #FF00FF;}
30% {box-shadow: 0px 0px 15px #FF0000; background-color: #008080;}
40% {box-shadow: 0px 0px 15px #FFFF00; background-color: #00FF00;}
50% {box-shadow: 0px 0px 15px #000000; background-color: #FFFFFF;}
60% {box-shadow: 0px 0px 15px #0000FF; background-color: #FFFF00;}
70% {box-shadow: 0px 0px 15px #FF00FF; background-color: #FF0000;}
80% {box-shadow: 0px 0px 15px #008080; background-color: #800080;}
90% {box-shadow: 0px 0px 15px #00FF00; background-color: #2F4F4F;}
100% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;}}
@keyframes changes {
0% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;}
10% {box-shadow: 0px 0px 15px #2F4F4F; background-color: #0000FF;}
20% {box-shadow: 0px 0px 15px #800080; background-color: #FF00FF;}
30% {box-shadow: 0px 0px 15px #FF0000; background-color: #008080;}
40% {box-shadow: 0px 0px 15px #FFFF00; background-color: #00FF00;}
50% {box-shadow: 0px 0px 15px #000000; background-color: #FFFFFF;}
60% {box-shadow: 0px 0px 15px #0000FF; background-color: #FFFF00;}
70% {box-shadow: 0px 0px 15px #FF00FF; background-color: #FF0000;}
80% {box-shadow: 0px 0px 15px #008080; background-color: #800080;}
90% {box-shadow: 0px 0px 15px #00FF00; background-color: #2F4F4F;}
100% {box-shadow: 0px 0px 15px #FFFFFF; background-color: #000000;}}
.changes:hover {
-webkit-animation-name: changes;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-name: changes;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;}








.container23 {
width:200px;
height:150px;
position:relative;}
.textarea {
background-color:#FFF;
top:50px;
left:25px;
width:160px;
height:35px;
position:absolute;
border: 2px solid #333;
box-shadow: 0px 0px 15px #000;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;}
.textarea:focus {
background-color:#fff;
top:0;
left:0;
height:150px;
width:200px;
border-radius:5px;
border: 2px solid #d4d0ba;
box-shadow: 0px 0px 15px #FFFFFF;}







.container24 {
width:200px;
position:relative;}
.container24:after {
text-align: center; position: absolute; background:#999;
top: 17px; right: -28px; width: 120px; height: 1.6em;
font-size: 1.1em; content: "TEXT";
-webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.outer, .outer:hover {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}
.outer{
color: #000; background: #DDD; overflow: hidden;}
.outer:hover {
color: #FFF; background: #666; overflow: hidden;}
.inner {
max-height: 110px; overflow: auto;
-webkit-transition: max-height 1.7s ease; transition: max-height 1.7s ease;}
.outer:hover > .inner {
max-height: 1200px;
-webkit-transition: max-height 3.5s ease 0.7s; transition: max-height 3.5s ease 0.7s;}







.tooltip25 {
position: relative; opacity: 0; color: #fff;
top: -50px; left: 0px;
width: 180px; padding: 5px;
border-radius: 25px; -webkit-border-radius: 25px;
background-color: rgba(0,0,30,0.5);
-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: .5s; transition: .5s;
-webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.container25 .tooltip25:after {
position: absolute; top: 100%; left: 45%; height: 0; width: 0;
border: 6px solid transparent; border-top: 6px solid rgba(0, 0, 30, 0.5);
content: "Awesome!"; white-space: nowrap; color:#DDD;
}
.container25:hover .tooltip25 {
opacity: 1; top: -225px;
-webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}

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.