responsive div bg image with a blur
responsive div bg image with a blur
Out of context: Reply #9
- 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);}