[CSS] Problems with filters

[Peeeeeeeeeeynk]

Hello everyone I'm trying to create a portfolio for my school project and I'm trying to implement filters in my code 

and I found some Issues where I cant fix it.

 

This is the pen I'm working on

http://codepen.io/CapsLocked/pen/qEdrf?editors=110

 

It works like this when they hover over the image the the text inside appears 

and the background image turns all blurry. I managed to do it in my earlier pens but the blur 

gets inherited by the text and I have no idea on how to solve this. 

 

Any help would be much appreciated.

[Hazy125]

Is this the most up to date pen, I don't see any CSS or JS that indicates any blurring, and the images don't blur on hover

[Peeeeeeeeeeynk]

Is this the most up to date pen, I don't see any CSS or JS that indicates any blurring, and the images don't blur on hover

no this is not the old one. I cant get it to work so I just deleted it and started new with this one.

[Hazy125]

no this is not the old one. I cant get it to work so I just deleted it and started new with this one.

Sorry this took a while, I was being stupid and using the ~ selector instead of the > selector and I've been needed IRL

.img1,.img2{	height:250px;	width:300px;	box-sizing: border-box;}.porf div {	display:inline-block;	position: relative;}.porf div a{	position: absolute;	z-index: 1;	display:block;	width:100%;   height:100%;	margin-top:-165px;	text-align: center;	color:white;	font-size: 20px;	font-family:arial;	text-decoration: none;	text-transform: uppercase;   opacity:0;  transition:all ease 0.3s;}.porf div:hover > a{  opacity:1;}.img1:hover > img{    -webkit-filter: blur(5px);  -moz-filter: blur(5px);  -o-filter: blur(5px);  -ms-filter: blur(5px);  filter: blur(5px);}.img2:hover > img{    -webkit-filter: blur(5px);  -moz-filter: blur(5px);  -o-filter: blur(5px);  -ms-filter: blur(5px);  filter: blur(5px);} 

This is the CSS, although there is still an issue in that the link only covers the bottom half of the image, so the link doesn't actually work unless they click the bottom half of the image. Things I changed:

 

+The image 1 hover and subsequent image selection(The last two things). This is what fixes your problem, before you would have been hovering the whole .img divs, and because the link is inside the img div, the text gets blurred too. This makes it so that when you hover the .img div, it applies the blur to just the image, not every child

 

+I also changed some of your existing code. Where you had .porf div a:hover. Doing this presented another problem, when you hovered over the top half of the div, the image blurred but because the image only takes up the bottom half, the link text doesn't actually display. So by using the > selector again, the link text displays no matter where you hover, although as mentioned above, it still won't be clickable unless you click the bottom half.

 

A solution to the link problem could be wrapping the link around the image as the a tag is actually a container anyway, although I don't think that would work well with your current CSS. Another option is to use javascript to link to the page onClick and use CSS to change the pointer style to the pointy finger thingy on div hover

[Peeeeeeeeeeynk]

Sorry this took a while, I was being stupid and using the ~ selector instead of the > selector and I've been needed IRL

-snip

Dude! Thank you so much this is so gonna speed my coding. The part of it not being able to be clicked on, it's okay just from this its already a big help.

Thanks!

[Hazy125]

Dude! Thank you so much this is so gonna speed my coding. The part of it not being able to be clicked on, it's okay just from this its already a big help.

Thanks!

You're welcome, but if curiosity strikes you, I also made the code to simulate the link a while back too

<!-- The HTML, pay attention to the onClick even on the div --><div class="porf">								<h2>Portfolio</h2>					<div class="img1" onClick="document.location.href='https://www.google.com.au/'">              <img src="http://i.imgur.com/WQqTg6m.jpg" style="height:300px; width:300px;">              <a href="#">KingsDelightIloilo.com</a>             </div>          					<div class="img2" onClick="document.location.href='https://www.google.com.au/'">            <img src="http://i.imgur.com/WQqTg6m.jpg" style="height:300px; width:300px;">            <a href="#">EdwinCapalla.com</a>          </div  			</div><!--The CSS -->.img1:hover > img,.img2:hover > img{ /* Combined the last two into the one for speed and pretty reasons */    -webkit-filter: blur(5px);  -moz-filter: blur(5px);  -o-filter: blur(5px);  -ms-filter: blur(5px);  filter: blur(5px);    cursor:pointer;/* When the div is hovered over, changes the mouse cursor to a pointer */    transition:all ease 0.5s; /* The blur transition has to go here, but I realised there was no transition in my previous one */}