How do I get this hover CSS3 effect? - html

Question

I have the following HTML:
<div class="item">
<img src="images/gallery/woman-1.jpg" alt="" width="100%" >
<div class="content">
<h3>A blog title.</h3>
</div><!-- /.content -->
</div>
Along with the following CSS:
.gallery {
.item {
width: 33%;
height: auto;
float: left;
}
}
I'd like to get this "Creative Zoe" effect on the items from here:
http://tympanus.net/Development/HoverEffectIdeas/
I've downloaded the source and tried to apply on the items but when I do, nothing works. I'm not sure what I'm doing wrong. Here is my attempt:
https://dl.dropboxusercontent.com/u/54191672/theme/index.html
I'm pretty stumped and would REALLY like this effect on my project. How can I do this correctly?

Answer 1

figure.effect-zoe figcaption {
top: auto;
bottom: 0;
padding: 1em;
height: 3.75em;
background: #fff;
color: #3c4a50;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
figure.effect-zoe h2 {
float: left;
}
figure.effect-zoe figcaption > span {
float: right;
}
figure.effect-zoe p {
position: absolute;
bottom: 8em;
padding: 2em;
color: #fff;
text-transform: none;
font-size: 90%;
opacity: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-zoe h2,
figure.effect-zoe figcaption > span {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, 200%, 0);
transform: translate3d(0, 200%, 0);
}
figure.effect-zoe figcaption > span::before {
display: inline-block;
padding: 8px 10px;
font-family: 'feathericons';
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-eye::before {
content: '\e000';
}
.icon-paper-clip::before {
content: '\e001';
}
.icon-heart::before {
content: '\e024';
}
figure.effect-zoe h2 {
display: inline-block;
}
figure.effect-zoe:hover p {
opacity: 1;
}
figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover figcaption > span {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.effect-zoe:hover h2 {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
figure.effect-zoe:hover figcaption > span:nth-child(4) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
figure.effect-zoe:hover figcaption > span:nth-child(3) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
figure.effect-zoe:hover figcaption > span:nth-child(2) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
<figure class="effect-zoe">
<img src="img/14.jpg" alt="img14">
<figcaption>
<h2>Creative <span>Zoe</span></h2>
<span class="icon-heart"></span>
<span class="icon-eye"></span>
<span class="icon-paper-clip"></span>
<p>Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
View more
</figcaption>
</figure>
It looks like you're missing the classes on your html that they use to trigger the effects.
<figure class="effect-zoe">
<img src="img/14.jpg" alt="img14">
<figcaption>
<h2>Creative <span>Zoe</span></h2>
<span class="icon-heart"></span>
<span class="icon-eye"></span>
<span class="icon-paper-clip"></span>
<p>Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
View more
</figcaption>
</figure>
They also have a lot of CSS on it that you dont seem to have
/*---------------*/
/***** Zoe *****/
/*---------------*/
figure.effect-zoe figcaption {
top: auto;
bottom: 0;
padding: 1em;
height: 3.75em;
background: #fff;
color: #3c4a50;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
figure.effect-zoe h2 {
float: left;
}
figure.effect-zoe figcaption > span {
float: right;
}
figure.effect-zoe p {
position: absolute;
bottom: 8em;
padding: 2em;
color: #fff;
text-transform: none;
font-size: 90%;
opacity: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect-zoe h2,
figure.effect-zoe figcaption > span {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,200%,0);
transform: translate3d(0,200%,0);
}
figure.effect-zoe figcaption > span::before {
display: inline-block;
padding: 8px 10px;
font-family: 'feathericons';
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-eye::before {
content: '\e000';
}
.icon-paper-clip::before {
content: '\e001';
}
.icon-heart::before {
content: '\e024';
}
figure.effect-zoe h2 {
display: inline-block;
}
figure.effect-zoe:hover p {
opacity: 1;
}
figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover figcaption > span {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-zoe:hover h2 {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
figure.effect-zoe:hover figcaption > span:nth-child(4) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
figure.effect-zoe:hover figcaption > span:nth-child(3) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
figure.effect-zoe:hover figcaption > span:nth-child(2) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}