responsive div bg image with a blur
- Started
- Last post
- 9 Responses
- wwfc
alright all...
suffering from fried head syndrome at the moment !! so hoping some bright eyed dev head can help me out here...
i have a responsive layout - all works great and as it should - no worries... but i need to add background images to three of the divs... which sounds easy enough but how do i make these background images responsive? i remember reading something about background-size: cover??? does that sound right?
there also needs to be a zoom and blur effect on the background images on hover/rollover...
been googling/stackoverflowing for a couple of hours now - not really getting there - all the code/snippets/tuts that i have found seem to be for image src not for background images...
anyone know the secret to these dark arts?!
:-/
- 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
- 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);}