Enlarging thumbnail pics on hover

HTML & CSS
1

I have built a responsive website that I am trying to get the thumbnail images to enlarge when I rollover and no matter what I try nothing happens, I have tried several online solutions and they do nothing.

This is the webpage : http://www.addesignandprint.co.uk/stationerydesigns.html#

This is the code I have so far as I have removed all attempts that havent worked

<div class="col-lg-12 col-xs-6 col-md-7">
<a>
<img src="images/LaceBand700jpg" alt="Lace Band Stationery" class="img-responsive center-block img-thumbnail"/>
</a>
</div>

Any help would be appreciated

1 Like
2

A .band-services .img-thumbnail:hover { transform: scale(1.2); } should do the trick.

1 Like
3

Many thanks.

Is that all the code that needs adding?

Anything in CSS?

1 Like
4

I decided my last question was stupid as it was obviously css you were telling me! That will teach me to reply in a hurry.

I have tried:-
.img-thumbnail:hover {
transform: scale(1.2);
}
and

.band-services .img-thumbnail:hover {
transform: scale(1.2);
}
in my css - unfortunately in both cases it has done nothing! I put this in my site specific css rather than bootstrap css where the img-thumbnail is located.

Please can you advise what I’m missing and why I cant see the wood for the trees.

Liz

1 Like
5

Well, it seems fixed now! Some caching layer or something?

1 Like
6

Thanks for letting me know. I dont know what happened there! I have cleared all cache and I can see it working now. The only thing is it is only going up a minute amount in size. The thumbnail around 200px is created from a 700px image and I was wanting when you hovered over the 200 to go up to the around full size. How do I alter this?

Liz

1 Like
7

To get the original size on hover, instead of transform you could try override the inherited max-width:100% . The max-width could be whatever covering the original size within a upper limit:

.img-thumbnail:hover {
/*	transform: scale(1.2); */
	max-width: 100vw; /* viewport width limit */
}

Edit)
Best to add a position to raise above other content on hover:

.img-thumbnail:hover {
/*	transform: scale(1.2); */
	max-width: 100vw; /* viewport width limit */
	position: relative;
	z-index: 9; /* raise above later in code content */
}
1 Like
8

This may be of interest:

I was searching for something else and this Topic cropped up…

The online Demo

2 Likes
9

what does vw mean?

Liz

1 Like
10

vw: 1% of viewport’s width.

1 Like
11

@TechnoBear explained already. :slight_smile:

Anyway, the 100vw was only an example, maybe 80vw would suit better. The image will display in its own intrinsic size and ratio, only limited by the max-width.

Interesting thread @John_Betong, well worth reading. :slight_smile:

2 Likes
12

Just a note that hover only really applies to those navigating with a mouse. The enlargement may not be accessible to those using a keyboard or touch-screen device.

3 Likes
13

That is a good point, it doesn’t work on my mobile! Any suggestion for similar effect that will work with or without mouse?

1 Like
14

For keyboards you can add a selector for focus wich should work as you have wrapped them in <a> tags.
For hover on touch-screen it can be more complex as different devices act differently, some will give hover or focus on touch, but not all do.

1 Like
15

To do it properly you would need some js to add and remove a class to duplicate the hover effect for touch devices.

Here are a couple of different examples.

1 Like
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.