Reputation: 147
Everything is working fine with my code, except that when I hover over my link, the animation cuts off. I don't know how to fix the problem so that, when I hover over the link, the background should blur and do it's animation as I've already written.
HTML:
<div class="class">
<img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" alt="innit">
<a href="#">
<div class="text">
<h3>goalkeepers</h3>
</div>
</a>
</div>
CSS:
.class{
width:50%;
height:21vw;
float:left;
overflow: hidden;
position: relative;
transition: ease-in-out 0.55s;
}
.class img{
width:100%;
height:120%;
margin-top:-3.5vw;
transition: ease-in-out 0.55s;
}
.class img:hover{
-webkit-filter: blur(10px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
transform:scale(1.05);
}
.text h3{
margin-top:0;
margin-left:0;
text-align: center;
font-variant: small-caps;
font-weight: 100;
font-size: 2.9vw;
font-family: montserratlight;
}
.text {
width: auto;
height: auto;
margin: 0;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
padding-bottom: 0.1vw;
display: inline-block;
}
.text:after {
content: "";
display: block;
margin: auto;
height: 0.15vw;
width: 0px;
background: transparent;
transition: width 0.55s ease, background-color 0.55s ease;
}
.class:hover > a .text:after {
width: 100%;
background: white;
}
Upvotes: 0
Views: 1745
Reputation: 4170
Firstly, move the <img>
tag after the anchor tag <a>
in the html dom
<div class="class">
<a href="#" class="hoverme">
<div class="text">
<h3>goalkeepers</h3>
</div>
</a>
<img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" alt="innit">
</div>
You can use sibling selector to select the image on hover of the anchor tag
.hoverme:hover + img { ...
Snippet
img:hover {
-webkit-filter: blur(10px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
transform: scale(1.05);
}
.text h3 {
margin-top: 0;
margin-left: 0;
text-align: center;
font-variant: small-caps;
font-weight: 100;
font-size: 2.9vw;
font-family: montserratlight;
}
.text {
width: auto;
height: auto;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding-bottom: 0.1vw;
display: inline-block;
}
.text:after {
content: "";
display: block;
margin: auto;
height: 0.15vw;
width: 0px;
background: transparent;
transition: width 0.55s ease, background-color 0.55s ease;
}
.hoverme {
position: absolute;
left: 80%;
top: 25%;
}
.hoverme:hover+img {
-webkit-filter: blur(10px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
transform: scale(1.05);
}
.dummy-text {
position: relative;
transform: rotate(-90deg);
font-size: 1em;
z-index: 100;
width: 100px;
right: -336px;
top: -81px;
/* font-weight: bold; */
color: white;
}
}
<div class="class">
<a href="#" class="hoverme">
<div class="text">
<h3>goalkeepers</h3>
</div>
</a>
<img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" alt="innit">
<div class="dummy-text">Dummy-Text</div>
</div>
Upvotes: 1
Reputation: 954
Go through this link, It has the detailed answer for your question !! I was facing the same problem, it helped me alot !
https://stackoverflow.com/a/29707839/6422740
This issue is that you are attempting to traverse up the document tree with CSS. There is no parent selector in CSS, therefore you can only rely on JS to toggle the blur effect when the inner element is hovered on.
This can be easily achieved using native JS, but I've chosen to use jQuery because of the relative ease of use.
The trick is quite simple: to absolutely position a blurred version of the background image, nested in a pseudo-element, say ::before, with its opacity set to zero. When the cursor is over the inner element, toggle a class, say .blur, which sets the pseudo-element's opacity to 1.
The reason why we can't use JS to set the CSS properties of the pseudo-element is because it is not accessible to JS.
$(function() {
$('.banner_link a').hover(function() {
$('#pic').addClass('blur');
}, function() {
$('#pic').removeClass('blur');
});
});
#pic {
background: url(http://www.metalinjection.net/wp-content/uploads/2014/07/space-metal.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 500px;
position: relative;
overflow: hidden;
}
#pic::before {
position: absolute;
content: '';
display: block;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url(http://www.metalinjection.net/wp-content/uploads/2014/07/space-metal.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: blur(5px);
filter: blur(5px);
opacity: 0;
transition: opacity .5s ease-in-out;
}
#pic.blur::before {
opacity: 1;
}
.banner_link {
font-family: 'Raleway';
letter-spacing: 0.2em;
font-size: 13px;
color: #ffffff;
text-align: center;
line-height: 16px;
padding-top: 45px;
position: relative;
text-transform: uppercase;
}
.banner_link a::after {
content: '';
display: block;
margin: auto;
height: 1px;
width: 90px;
background: #ffffff;
transition: width .2s ease, background-color .5s ease;
}
.banner_link a:hover:after {
width: 0px;
background: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pic" class="banner">
<div class="banner_link"><a>Link</a>
</div>
</div>
Upvotes: 2