Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Rollovers

Status
Not open for further replies.
csatterwhite

csatterwhite

Programmer
Aug 4, 2010
4
Can someone please explain to me how to do what I have illustrated below?

Say I have 10 images that I would like to treat as a menu, tiny images, on rollover, the image gets larger, has padding and a border, thus expanding. Problem is, the rollover moves the element to the right of the rollover, I would like for the elements to stay positioned, and the image expand from the center, instead of top left, and z-index over other images.

rollover.jpg


Tried this, didnt work.

Code: 
.mini-slide-holder img { width:28px; height:36px; background:#fdfdfd; cursor: pointer; position: relative; z-index: 1;  }
.mini-slide-holder img.first { }
.mini-slide-holder img:hover { width:37px; height:48px; padding:2px; border:1px solid #d5d5d5; position: relative; z-index: 2; }

Is it possible with css only?

=======================
Carl Satterwhite
Visual Designer
 
Sort by date Sort by votes
Is it possible with css only?
Click to expand...

No, but it can be done with HTML and CSS.


I would like for the elements to stay positioned,
Click to expand...
This behaviour is the ONLY time you need to use positioning.

Simplest way is to put a absolute postioned and hidden image element (the full size one) with a higher z-index in the same container as the smaller image, then set it visible using the :hover pseudoclass.

The parent container must be set to position: relative so that the absolute element will be located relative to the parent rather than the body element.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
Something like this may be a good starting point. Play around with it.

Code: 
[b][COLOR=#0000FF]<style[/color][/b] [COLOR=#009900]type[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"text/css"[/color][b][COLOR=#0000FF]>[/color][/b]
[tab]div.menubar
[tab]{
[tab][tab]height:128px;
[tab][tab]border:1px solid gray;
[tab][tab]background-color: #dedede;
[tab][tab]position:relative;
[tab][tab]margin-top: 64px;   
[tab][tab]position:relative;
[tab]}
[tab]
[tab]div.menubar div.thumb
[tab]{
[tab][tab]width:128px;
[tab][tab]height:128px;
[tab][tab]border:1px solid #aaaaaa;
[tab][tab]float:left;
[tab][tab]margin-left:5px;
[tab][tab]margin-right: 5px;
[tab][tab]z-index: -5;[tab][tab]
[tab][tab]background-color:#992200;
[tab]}
[tab]
[tab]div.menubar div.thumb:hover
[tab]{
[tab][tab]z-index:20;
[tab][tab]width:256px;
[tab][tab]height:256px;
[tab][tab]box-shadow:4px 4px 6px #868686;
[tab][tab]margin-left: -64px;
[tab][tab]margin-right: -64px;  
[tab][tab]margin-top: -64px;
[tab][tab]position:relative;  
[tab][tab]background-color:#464646;
[tab][tab]
[tab]}

[b][COLOR=#0000FF]</style>[/color][/b]
[b][COLOR=#0000FF]</head>[/color][/b]
[b][COLOR=#0000FF]<body>[/color][/b]

[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"menubar"[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]'thumb'[/color][b][COLOR=#0000FF]><h2>[/color][/b]Thumb 0[b][COLOR=#0000FF]</h2></div>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]'thumb'[/color][b][COLOR=#0000FF]><h2>[/color][/b]Thumb 1[b][COLOR=#0000FF]</h2></div>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]'thumb'[/color][b][COLOR=#0000FF]><h2>[/color][/b]Thumb 2[b][COLOR=#0000FF]</h2></div>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]'thumb'[/color][b][COLOR=#0000FF]><h2>[/color][/b]Thumb 3[b][COLOR=#0000FF]</h2></div>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]'thumb'[/color][b][COLOR=#0000FF]><h2>[/color][/b]Thumb 4[b][COLOR=#0000FF]</h2></div>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]'thumb'[/color][b][COLOR=#0000FF]><h2>[/color][/b]Thumb 5[b][COLOR=#0000FF]</h2></div>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]'thumb'[/color][b][COLOR=#0000FF]><h2>[/color][/b]Thumb 6[b][COLOR=#0000FF]</h2></div>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]'thumb'[/color][b][COLOR=#0000FF]><h2>[/color][/b]Thumb 7[b][COLOR=#0000FF]</h2></div>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]'thumb'[/color][b][COLOR=#0000FF]><h2>[/color][/b]Thumb 8[b][COLOR=#0000FF]</h2></div>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]'thumb'[/color][b][COLOR=#0000FF]><h2>[/color][/b]Thumb 9[b][COLOR=#0000FF]</h2></div>[/color][/b]   
[b][COLOR=#0000FF]</div>[/color][/b]

[b][COLOR=#0000FF]</body>[/color][/b]

This is very basic though.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
787
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
409
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
326
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
359
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
137
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top