Relative positioning with transition effect
I have six boxes labeled. I want the title to be displayed on a mouse hover event. In doing this, I ran into two problems.
-
If I used position: absolute, figure captions would lose their center alignment.
-
If I use position: relative, the figure captions are centered, but they cannot animate.
So, in general I want to center align the titles of the pictures and it should animate from bottom to top.
I've tried the following things:
Left: 50%;
Right: 50%;
margin-right: 50%;
margin-left 50%;
But this will cause it to be centered on the page, but I want the titles to be gallop aligned in the margin, not on the page.
Here's an example
a:hover img{
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
a:hover .caption{
display: inline;
opacity: 1;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
figure{
overflow: hidden;
}
figure img{
height: 105px;
width: 120px;
padding: 20px 0px 0px 0px;
display: flex;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.caption{
display: none;
font-size: 1.4em;
color: #fff;
position: relative;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
a{
text-decoration:none;
outline:none;
color: $fff;
}
.btn-row{
margin: 30px 0px 0px 0px;
display: inline-flex;
}
.box-btn{
height: 150px;
width: 150px;
border-radius: 10px;
border: 1px solid #bdc1c4;
background-color: $white;
margin: 0px 10px 0px 10px;
outline: none;
}
<center><br>
<div class="btn-row">
<a href="domainSearch.html" class="link">
<figure class="box-btn">
<img src="style/img/university.jpg" class="img">
<figcaption class="caption">xyz</figcaption>
</figure>
</a>
<a href="domainSearch.html" class="link">
<figure class="box-btn">
<img src="style/img/university.jpg" class="img">
<figcaption class="caption">xyz</figcaption>
</figure>
</a>
<a href="domainSearch.html" class="link">
<figure class="box-btn">
<img src="style/img/university.jpg" class="img">
<figcaption class="caption">abcdefghijkl </figcaption>
</figure>
</a>
</div>
<div class="btn-row">
<a href="domainSearch.html" class="link">
<figure class="box-btn">
<img src="style/img/university.jpg" class="img">
<figcaption class="caption">short text</figcaption>
</figure>
</a>
<a href="domainSearch.html" class="link">
<figure class="box-btn">
<img src="style/img/university.jpg" class="img">
<figcaption class="caption">long text coming here
</figcaption>
</figure>
</a>
<a href="domainSearch.html" class="link">
<figure class="box-btn">
<img src="style/img/university.jpg" class="img">
<figcaption class="caption">defghi</figcaption>
</figure>
</a>
</div>
</center>
+3
source to share
1 answer
Your problem is property display
. Your animation runs on time display: none;
, which is not very useful. Just remove this definition display
and the animation will work fine.
(I changed the subtitle color to black in the snippet to view them)
a:hover img{
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
a:hover .caption{
opacity: 1;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
figure{
overflow: hidden;
}
figure img{
height: 105px;
width: 120px;
padding: 20px 0px 0px 0px;
display: flex;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.caption{
font-size: 1.4em;
color: #000;
position: relative;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
a{
text-decoration:none;
outline:none;
color: $fff;
}
.btn-row{
margin: 30px 0px 0px 0px;
display: inline-flex;
}
.box-btn{
height: 150px;
width: 150px;
border-radius: 10px;
border: 1px solid #bdc1c4;
background-color: $white;
margin: 0px 10px 0px 10px;
outline: none;
}
<center><br>
<div class="btn-row">
<a href="domainSearch.html" class="link">
<figure class="box-btn">
<img src="style/img/university.jpg" class="img">
<figcaption class="caption">xyz</figcaption>
</figure>
</a>
<a href="domainSearch.html" class="link">
<figure class="box-btn">
<img src="style/img/university.jpg" class="img">
<figcaption class="caption">xyz</figcaption>
</figure>
</a>
<a href="domainSearch.html" class="link">
<figure class="box-btn">
<img src="style/img/university.jpg" class="img">
<figcaption class="caption">abcdefghijkl </figcaption>
</figure>
</a>
</div>
<div class="btn-row">
<a href="domainSearch.html" class="link">
<figure class="box-btn">
<img src="style/img/university.jpg" class="img">
<figcaption class="caption">short text</figcaption>
</figure>
</a>
<a href="domainSearch.html" class="link">
<figure class="box-btn">
<img src="style/img/university.jpg" class="img">
<figcaption class="caption">long text coming here
</figcaption>
</figure>
</a>
<a href="domainSearch.html" class="link">
<figure class="box-btn">
<img src="style/img/university.jpg" class="img">
<figcaption class="caption">defghi</figcaption>
</figure>
</a>
</div>
</center>
0
source to share