WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Positioning problem with onmouseover image swap in gallery

Reply
  Thread Tools Display Modes
Old 30th August 17, 08:55 PM   #1
saul
WLC Member
 
Join Date: Aug 2017
Posts: 2
Default Positioning problem with onmouseover image swap in gallery

I found a nice tutorial at
http://www.dwuser.com/education/cont...with-pure-css/

and tried to hack it to my own needs, basically wanted an image swap on mouseover rather than text.

I got to this

http://www.shirk.org.uk/test.htm

...almost there but on the image slide up it goes too high and leaves a small gap at the bottom. I looked at chrome inspect but coun't figure where that alignment issue was coming from.

Any help gratefully received!

Saul
saul is offline   Reply With Quote
Old 4th November 17, 08:11 PM   #2
spikemeister
WLC Lover
 
spikemeister's Avatar
 
Join Date: Mar 2008
Location: Ireland
Posts: 54
Default Re: Positioning problem with onmouseover image swap in gallery

Hi I was scratching my head for a while but finally found a solution. I have only tried it in chrome and so maybe try it in other browsers.

Change the following css

Code:
.boxInner img {
      width: 100%;
      vertical-align:bottom;
    }
spikemeister is offline   Reply With Quote
Old 5th November 17, 04:57 PM   #3
saul
WLC Member
 
Join Date: Aug 2017
Posts: 2
Default Re: Positioning problem with onmouseover image swap in gallery

Fantastic, thats a great help spike
saul is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:26 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.