How to do this in CSS?
- Started
- Last post
- 6 Responses
- mg33
http://www.harlointeractive.com
The red image rollovers. Anyone know of a tutorial to do these purely with CSS, to include transparent overlay and text above an image on rollover? Thanks!
- Nathan_Adams0
html:
<div class="container">
<img src="hi.jpg" width:300 height: 200" />
<span>Text for rollover</span>
</div>css:
.container {display:block; position: relative}
.container span {display:block; position:absolute; width: 100%; height: 100%; background: rgba(255,0,0,0.5); opacity: 0;}
.container:hover span {opacity: 1}That'll get you started. Through in some css transitions and some other styling to fancy it up a bit.
- oh, and .container span should also have top:0; left: 0;Nathan_Adams
- Thanks Nathan!mg33
- ArmandoEstrada0
http://buildinternet.com/2011/03…
Using it now on a project I am working on.
- Why is it so common that seeing an example of something is next to impossible on sites like this?mg33
- http://buildinternet…
And I'm using this plugin on some Facebook custom tabs, works really well.elahon
- dbloc0
hidden div and used jquery fade
- Why use jQuery when you can do it easily in CSS?Nathan_Adams
- actually I like what you did up there.dbloc
- OSFA0
nice site!
- mg330
FYI found some info about doing this with CSS3