There are many scripts that use effects to change the content when you put your mouse over something. This is called a rollover effect. In the following examples the "hover" CSS property will be used. We can change colors, background, fonts, text or anything you like. Take a look below.
The HTML code is basically the same for all examples, like this:
HTML:<div class="infobox">
<img src="URL_imagen">
<div>visible text</div>
<div class="more">text displayed on mouse over</div>
</div>
Example 1:Demo:
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas hendrerit quam a elit luctus ut tempor leo congue? Maecenas blandit massa id mi blandit consectetur.
.infobox {
border: 1px solid #345;
cursor: pointer;
padding: 5px;
position: relative;
width: 130px;
}
.infobox img {
position: relative;
z-index: 2;
}
.infobox .more {
display: none;
}
.infobox:hover .more {
background-color: #345;
border: 1px solid #89A;
display: block;
font-size: 20px;
height: 130px;
left: 0px;
padding: 5px 20px 5px 140px;
position: absolute;
text-align: justify;
top: 0px;
width: 400px;
z-index: 1;
}
Example 2:
Demo:
Visible Content
Aliquam mattis purus vel leo dignissim vel pulvinar lectus hendrerit! Aenean facilisis ante vel lacus interdum ut lobortis enim aliquet. Vivamus sagittis feugiat est id rhoncus? Maecenas ut leo vel enim mollis tempor. Nullam ornare fermentum tempor. Proin eu interdum massa!
CSS:
.infobox {
-moz-border-radius: 10px;
background-color: #123;
border: 2px solid #567;
color: #ABC;
cursor: pointer;
font-size: 20px;
padding: 5px 10px;
position: relative;
text-align: center;
width: 180px;
}
.infobox .more {
display: none;
}
.infobox:hover .more {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
background-color: #101921;
border: 2px solid #567;
color: #EEE;
display: block;
font-size: 12px;
left: -2px;
padding: 5px 10px;
position: absolute;
text-align: justify;
top: -2px;
width: 180px;
z-index: 1;
}
Example 3:
Demo:
EXPAND
Sed interdum interdum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus fringilla aliquam lectus; laoreet accumsan magna vulputate eget. Aliquam vel quam mi.
CSS:
.infobox2 {
color: #888;
cursor: pointer;
font-size: 16px;
font-weight: bold;
position: relative;
text-align: center;
width: 130px;
}
.infobox2 img {
position: relative;
z-index: 2;
}
.infobox2 .more {
display: none;
}
.infobox2:hover .more {
-moz-border-radius: 10px;
background-color: #333;
color: #BBB;
display: block;
font-size: 14px;
font-weight: normal;
height: 130px;
left: 0px;
padding: 15px 20px 10px 135px;
position: absolute;
text-align: justify;
top:- 5px;
width: 320px;
z-index: 1;
}
Credits: vagabundia
