It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 26 August 2020
Texts and images are the most important parts of websites. Therefore, you have to manage them in a way to avoid any conflicts. One way is to hide figures related texts on their back. When the images are hovered, they flip automatically and show the texts! Amazing!
<!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway|Reenie+Beanie);
* {
box-sizing: border-box;
}
html,
body {
margin: 5%;
font-family: "Raleway", sans-serif;
line-height: 1.5em;
}
img {
width: 100%;
}
a {
color: black;
}
.caption,
h1,
.date {
margin: 0;
text-align: center;
}
.caption,
h1 {
font-family: "Reenie Beanie", sans-serif;
font-size: 2em;
padding: 10px 10px 0 10px;
}
.date {
font-size: 0.75em;
}
.description {
font-size: 0.9em;
padding: 0 20px 20px 20px;
text-align: left;
}
.container {
-webkit-perspective: 1000px;
perspective: 1000px;
display: inline-block;
margin: 3%;
}
.container:hover .flipper {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.container,
.front,
.back {
width: 250px;
height: 250px;
}
.flipper {
-webkit-transition: 0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.front {
z-index: 2;
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#content {
text-align: center;
}
</style>
<div id="content">
<div class="container">
<div class="flipper">
<div class="front">
<img src="https://www.javascriptfreecode.com/images/cherry-blossoms-unsplash.jpg" alt="cherry blossoms">
<p class="caption">Cherry blossom</p>
</div>
<div class="back">
<a href="https://www.javascriptfreecode.com" target="_blank">
<h1>Cherry blossom</h1>
</a>
<p class="date">23/07/2020</p>
<p class="description">A cherry blossom is the flower of any of several trees of genus Prunus, particularly the Japanese cherry, Prunus serrulata, which is called sakura after the Japanese (桜 or 櫻; さくら).</p>
</div>
</div>
</div>
</div><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!