Tim Nikischin Tim Nikischin - 1 month ago 17
CSS Question

CSS filter Blur causing elements to hide

I have a problem caused by css blur filter. I want an image to get blurred when hovered and a title displayed instead while hovering. However, after the animation finished, the title hides (see snipped below).

I want the title to stay visible as long as it is hovered. I built you a snipped, hope you could help me fixing this little bug.

If I don't use css blur filter, everything just works well.



body {
margin: 0;
}

.imageFolder {
float: left;
display: block;
width: calc(100vw / 3 - 0px);
height: calc(100vw / 3 * 2 / 3 - 0px);
border: 0px solid #444;
overflow: hidden;
text-align: center;
vertical-align: middle;
}

.imageBox {
display: inline;
margin: 0 auto;
width: 100%;
height: 100%;
overflow: hidden;
}

.imageBox img {
display: inline;
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.2s ease-in;
}

.imageLabel {
display: inline-block;
margin: calc(0px - 100vw / 3 * 2 / 3) auto 0;
height: 40px;
line-height: 40px;
font-weight: 700;
font-size: 24px;
padding: 10px 40px;
text-decoration: none;
color: white;
opacity: 0;
text-align: center;
vertical-align: middle;
border: 1px solid white;
}

.imageFolder:hover > .imageBox img {
width: calc(100% + 30px);
height: calc(100% + 20px);
margin: -10px -15px;
transition: all 0.6s ease-out;
filter: blur(4px);
}

.imageFolder:hover > .imageLabel {
opacity: 1;
transition: all 0.6s ease-out;
}

<a href="">
<div class="imageFolder">
<div class="imageBox">
<img src="http://tim.nikischin.com/library/gallery/087_Charlotte/_IMG4015.jpg" alt="">
</div>
<div class="imageLabel">Charlotte</div>
</div>
</a>




Answer

Add position: relative to .imageLabel.

body {
	margin: 0;
}

.imageFolder {
	float: left;
	display: block;
	width: calc(100vw / 3 - 0px);
	height: calc(100vw / 3 * 2 / 3 - 0px);
	border: 0px solid #444;
	overflow: hidden;
	text-align: center;
	vertical-align: middle;
}

.imageBox {
	display: inline;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.imageBox img {
	display: inline;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.2s ease-in;
}

.imageLabel {
    position: relative;
	display: inline-block;
	margin: calc(0px - 100vw / 3 * 2 / 3) auto 0;
	height: 40px;
	line-height: 40px;
	font-weight: 700;
	font-size: 24px;
	padding: 10px 40px;
	text-decoration: none;
	color: white;
	opacity: 0;
	text-align: center;
	vertical-align: middle;
	border: 1px solid white;
}

.imageFolder:hover > .imageBox img {
	width: calc(100% + 30px);
	height: calc(100% + 20px);
	margin: -10px -15px;
	transition: all 0.6s ease-out;
	filter: blur(4px);
}

.imageFolder:hover > .imageLabel {
	opacity: 1;
	transition: all 0.6s ease-out;
}
<a href="">
	<div class="imageFolder">
		<div class="imageBox">
			<img src="http://tim.nikischin.com/library/gallery/087_Charlotte/_IMG4015.jpg" alt="">
		</div>
		<div class="imageLabel">Charlotte</div>
	</div>
</a>