<div class="dAnim">
<div>
<img src="https://img-fotki.yandex.ru/get/9931/5091629.a0/0_835bb_35485e4a_XL" />
<div>
Here's another picture
<div>
yes, It's awesome too
</div>
</div>
</div>
</div>
.dAnim
{
padding:5px;
font-family:Georgia,Verdana;
border:1px solid #bbb;
display:inline-block;
position:relative;
/* on Mouseout animation */
/* The -webkit- and -ms- vendor prefixes are added */
/* for chrome and ie10+ comptability */
transition: transform .2s ease-out;
transition: transform 0.2s ease-out;
transition: transform .2s ease-out;
transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
/* CSS3 Stripes as a Background Image*/
background-image: linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);
background-image: linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);
background-image: linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);
background-image: linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);
background-image: gradient(linear, 100% 100%, 0 0,color-stop(.25, #dadada), color-stop(.25, #c2c2c2),color-stop(.5, #c2c2c2),color-stop(.5, #dadada),color-stop(.75, #dadada),color-stop(.75, #c2c2c2),color-stop(1, #c2c2c2));
background-image: linear-gradient(135deg,#c2c2c2 25%,#dadada 25%,#dadada 50%, #c2c2c2 50%, #c2c2c2 75%,#dadada 75%,#dadada 100%);
background-size: 40px 40px;
/* Background stripes animation */
animation: bganim 3s linear 2s infinite;
animation: bganim 3s linear 2s infinite;
animation: bganim 3s linear 2s infinite;
z-index:98;
}
@keyframes bganim { from {background-position:0px;} to { background-position:40px;} }
@-webkit-keyframes bganim { from {background-position:0px;} to { background-position:40px;} }
@-ms-keyframes bganim { from {background-position:0px;} to { background-position:40px;} }
.dAnim:hover
{
/* The hovered element needs to be the top element */
z-index:99;
/* Main div mouseover animation */
transform: scale(1.3) rotate(2deg);
transform: scale(1.3) rotate(2deg);
transform: scale(1.3) rotate(2deg);
}
.dAnim div
{
border:1px solid transparent;
background-color:white;
/* Inside divs mouseout animation */
transition: transform .2s ease-out;
transition: transform .2s ease-out;
transition: transform .2s ease-out;
transition-delay:.1s;
transition-delay:.1s;
transition-delay:.1s;
transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
}
.dAnim:hover div
{
border:1px solid #444;
/* Inside divs mouseover animation */
transform: rotate(-2deg);
transform: rotate(-2deg);
transform: rotate(-2deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.