responsive div bg image with a blur
- Started
- Last post
- 9 Responses
- Nathan_Adams0
To do the hover, I'd set the background within it's own div positioned within the container. It's not 100% semantic having an empty div just for presentation, but will do the job.
<div class="container">
<p>Content, content, content</p>
<div class="background"></div>
</div>.container {position:relative}
.background {position:absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; overflow: hidden; background-size: cover; background-image: url(whatever.jpg);}
.container:hover .background {transform: scale(1.2);}
- BabySnakes0
div{
background-image: url('myimage');
background-size:100%;
}
div:hover{
background-size:120%;
}
- BabySnakes0
blur wont be so easy....
- wwfc0
cheers babysnakes - i'll give it a whirl ;-)
- BabySnakes0
use css transitions for nicer effect
- akiersky0
the background-size: cover is correct as far as making the bg fill the div.
the rollover effect, especially with cover, gets kinda tricky. Maybe this page has some hints/ideas you could use: http://tympanus.net/Development/…
the "glowing ruby", third middle rollover seems similar to what you are describing
- uan0
can't you just use the css blur ?
http://jsfiddle.net/cm56kpyj/guess depending on what browsers you need to support
- this will also blur the content of the the div...ok, not a good idea.uan