CSS Problem

[micromaster78609]

Hi guys
I got a little problem that i can’t solve

I want to create a competitors page for my sport team
The problem comes when i try to make the window smaller, The hover effect is going out of the frame.

Do you have an idea how to solve this problem?

The code is:

<ul class="caption-style-1">
<li> <img src="http://armsport.co.il/wp-content/uploads/2016/08/0163_tn__thumbnail@2x-1.jpg" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<div align="center">
<h1>Competitor Name</h1>
<p>City</p>
</div>
</div>
</li>
</ul>

<style>
.caption-style-1 {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.caption-style-1 li {
float: center;
padding: 0px;
position: relative;
overflow: hidden;
}
.caption-style-1 li:hover .caption {
opacity: 1;
}
.caption-style-1 img {
margin: 0px;
padding: 0px;
float: left;
z-index: 4;
}
.caption-style-1 .caption {
cursor: pointer;
position: absolute;
opacity: 0;
-webkit-transition: all 0.45s ease-in-out;
-moz-transition: all 0.45s ease-in-out;
-o-transition: all 0.45s ease-in-out;
-ms-transition: all 0.45s ease-in-out;
transition: all 0.45s ease-in-out;
}
.caption-style-1 .blur {
background-color: rgba(0,0,0,0.65);
height: 450px;
width: 300px;
z-index: 5;
position: absolute;
}
.caption-style-1 .caption-text h1 {
text-transform: uppercase;
font-size: 24px;
}
.caption-style-1 .caption-text {
z-index: 10;
color: #fff;
position: absolute;
width: 300px;
height: 450px;
text-align: center;
top: 300px;
}

[stetim94]

center is not a valid value for float property. Use float: left, also align center is no longer supported:

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/align

well, the simple solution would be to make the text relatively sized to the image

if you look at this bit of code:

.caption-style-1 .blur {
background-color: rgba(0,0,0,0.65);
height: 450px;
width: 300px;
z-index: 5;
position: absolute;
}

it has fixed height and width, this will cause it to expand the image when images shrink.

why is .caption positioned absolute? Now we can’t use bottom to position the text at the bottom