i have been meaning ask long time here goes: new world of web design , working on first website. technology blog, have thought of grid layout same , works great.
however, grid using consists of high resolution images related topic of article. have spend lot of time searching various effects on images overlays(coloured , otherwise), text on images, proper ways use text on images etc. think have enough knowledge regarding these effects apply them website.
the problem is, want make website responsive, happens is, coloured overlays rendered fine on devices text on images positioned absolutely goes off images sometimes, or isn't legible enough or goes don't want go.
so question of is: instead of doing css, isnt better use image editor photoshop or , add these images grid?
it scale better technique? new please if obvious, please try explain.
image text inflexible , maintainability problematical need change image evry time change text.
a common technique wrap image in div shrink-wrapped size of image , position overlay absolutely (after adding position:relative wrapping div.
then can add text overlay , style anyway like...you can fade in , out.
like so.
.wrap { display: inline-block; position: relative; } .wrap img { display: block; max-width: 100%; height: auto; } .wrap .overlay { position: absolute; top:0; left:0; height: 100%; width: 100%; background: rgba(255,0,0,0.5); text-align: center; color:white; transition: opacity .5s ease; opacity:0; } .wrap:hover .overlay{ opacity:1; }<h2>hover image</h2> <div class="wrap"> <img src="http://lorempixel.com/output/city-q-c-200-200-2.jpg" alt="" /> <div class="overlay"> <h3>las vegas</h3> <p>a city dedicated time</p> </div> </div>
Comments
Post a Comment