Image Hover Effect Issue

[mumford]

Hi

I have set up some image hover effects as seen here – http://cre8tivesource.co.uk/test/sports-facilities/

All of the images are the same size 345×345, but if you look at the last image it looks much wider?

Also I need to add text on the image in its inactive state as seen.

But the only way I could get this to show and hide was adding the title twice, is their an easier way of doing this, so I don’t have to duplicate the title eg “Sports Hall”

This is the HTML

<div class="col-sm-12 col-md-3">
<div class="hover-item square colored effect from_top_and_bottom">
<a href="#">
<div class="img"><img src="images/sports-hall.jpg" class="img-responsive" /></div>
<h2>Sports Hall</h2>
<div class="info">
<h3>Sports Hall</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
<p>More Info ></p>
</div>
</a>
</div>
</div>

Hope the above makes sense, if you look at the example this should explain it better.

Many Thanks

[Paulie_D]

You’re trying to cram 4 x 345px (1380px) into a space that isn’t big enough for it.

.hover-item.square {
    height: 345px;
    position: relative;
    width: 345px; /* remove this */
}

@media (min-width: 1200px)
.container {
    width: 1170px;
}

Removing the width will fix the fitting issue but you’ll need to address the other issues that arise.

[mumford]

Hi Paulie

Thanks, the sites design is 1600px wide, is it still ok to use Bootstrap for this width?

Thanks

[Paulie_D]

On a side note…you have a “More Info” paragraph in each section. This seems redundant since the whole thing is a link.

I’d either not use a wrapping link or have a link in the revealed div.

[Paulie_D]

Thanks, the sites design is 1600px wide, is it still okj to use Bootstrap for this width?

Sure…but you’ll probably need either a new set of media queries or change the existing ones.

[mumford]

So if I added for example

‘
@media (min-width: 1600px)
.container {
width: 1570px;
}
‘

Would that be all that I need to do?

[Paulie_D]

I guess so…I’m not sure what else might break.

My advice would be to try it and see what happens…you can always remove it if it doesn’t work.

[Author]

Posts