3D Caption Hover Effect

Themes Gadget A website for all blogger templates solutions, blogger widgets, tips &amp; tricks and much more.

Read More Themes Gadget A website for all blogger templates solutions, blogger widgets, tips &amp; tricks and much more.

/* Demo purposes only */ $(".hover").mouseleave( function () { $(this).removeClass("hover"); } ); .onPst .blogPts{max-width:1040px;} .Main-I3CHE { display: flex; justify-content: center; align-items: center; flex-flow: wrap; margin: 0; height: 100%; font-family: 'noto sans', sans-serif; } .snip1234 { color: #fff; position: relative; float: left; overflow: hidden; margin: 10px 1%; min-width: 220px; max-width: 310px; max-height: 220px; width: 100%; color: #262d3d; text-align: left; background-color: #fafafc; font-size: 16px; -webkit-perspective: 50em; perspective: 50em; } .snip1234 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } .snip1234 img { opacity: 1; width: 100%; -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; transform-origin: 0% 50%; } .snip1234 figcaption { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: rotateY(-90deg) translate(0%, -50%); transform: rotateY(-90deg) translate(0%, -50%); -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; z-index: 1; opacity: 0; padding: 0 30px; } .snip1234 h3, .snip1234 p { line-height: 1.5em; } .snip1234 h3 { margin: 0; font-weight: 800; } .snip1234 p { font-size: 0.8em; font-weight: 500; margin: 0 0 15px; } .snip1234 .read-more { border: 1px solid #262d3d; padding: 0.5em 1em; font-size: 0.8em; text-decoration: none; color: #262d3d; display: inline-block; } .snip1234 .read-more:hover { background-color: #ffffff; color: #000000; } .snip1234:hover img, .snip1234.hover img { -webkit-transform: rotateY(90deg); transform: rotateY(90deg); opacity: 0; } .snip1234:hover figcaption, .snip1234.hover figcaption { -webkit-transform: rotateY(0deg) translate(0, -50%); transform: rotateY(0deg) translate(0, -50%); opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }

Mobster Demo

3D Caption Hover Effect

Themes Gadget

Themes Gadget

Themes Gadget

Mobster

Ad-Blocker Detected!

Cookies Consent

Cookies Policy