Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
image caption exercise
<a class="caption"
href="http://cargocollective.com/jaimemartinez/Illustration"
data-title="Smug Eagle"
data-description="I watched the four riders ...">
<img src="http://tympanus.net/Tutorials/PseudoElementsImageCaptions/images/2.jpg" alt="Illustration of Smug Eagle" />
</a>
<a class="caption1"
href="http://cargocollective.com/jaimemartinez/Illustration"
data-title="Smug Eagle"
data-description="I watched the four riders ...">
<img src="http://tympanus.net/Tutorials/PseudoElementsImageCaptions/images/1.jpg" alt="Illustration of Smug Eagle" />
</a>
.caption{
display:inline-block;
position: relative;
margin: 10px;
overflow: hidden;
}
.caption img{
display: block;
max-width: 100%;
transition: opacoty 0.3s ease-in-out;
}
.caption:hover img{
opacity: 0.5;
}
.caption::before,
.caption::after{
position:absolute;
box-sizing:border-box;
width: 100%;
height: 50%;
color: #fff;
z-index: 1;
transition: transform 0.5s ease-in-out;
}
.caption::before{
content:attr(data-title);
top: 0;
background: #0083ab;
font-size: 40px;
font-weight: 300;
padding: 30px;
transform: translateY(-100%);
}
.caption::after{
content: '....' attr(data-description) '....';
top: 50%;
background: #f27545;
font-size: 14px;
padding: 20px;
transform: translateY(100%);
}
.caption:hover::after,
.caption:hover::before{
transform: translateY(0%);
}
.caption1{
display:inline-block;
position:relative;
margin:10px;
overflow:hidden;
background:rgba(0,0,0,0.2);
transition:background 0.3s ease-in-out;
}
.caption1:hover{
background:rgba(0,0,0,0);
}
.caption1 img{
display:block;
max-width:100%;
transition:transform 0.3s ease-in-out;
}
.caption1:hover img{
transform:translateX(100%);
}
.caption1::before,
.caption1::after{
box-sizing:border-box;
position:absolute;
width:100%;
z-index:-1;
background:#cecece;
transform:translateX(-30%);
transition:transform 0.3s ease-in-out;
}
.caption1::before {
content: attr(data-title);
height: 30%;
color: #05b19a;
font-size: 40px;
font-weight: 300;
padding: 30px;
}
.caption1::after {
content: '\201C' attr(data-description) '\201D';
top: 30%;
height: 70%;
color: #fff;
font-size: 14px;
padding: 20px 30px;
}
.caption1:hover::before,
.caption1:hover::after{
transform:translateX(0%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.