CSS Rollovers

BB Theme
1

Perhaps I’m doing this completely wrong.

I’m trying to achieve the affects listed here: http://codepen.io/nxworld/pen/ZYNOBZ

I’m testing the first hover effect. “Zoom In #1”

" /* Zoom In #1 */
.hover01 figure img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover01 figure:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}"

I’ve added the modified version to apply to the BB theme… listed below, in the custom css under Customization > Code > CSS.

.hover1 img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover1:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}

I’ve created separate image modules inside of a row and added the “hover1” class. The image blows up, but leaves its .fl-photo-img boundaries (unlike in the example: http://codepen.io/nxworld/pen/ZYNOBZ ) …

2

Hey Elizabeth,

You’ll want to set overflow to hidden like so…

.hover1 {
  overflow: hidden;
}

Also, make sure all the padding/margin on the row/column/module where the image is is set to 0. :slight_smile:

Ben

3

I’ve added that, and it still won’t work. I’ve also changed all padding/margins to 0 for everything related to the image.

4

Can you share the URL of the site in question so we can take a look?

Ben

5

http://labs.websiteproject.ca/rollovers/ The middle blank image.

6

Hey Elizabeth,

You’re assigning the style to the img tag, not the .hover1 class.
http://imgur.com/O9DFmG4

Simply changing img to .hover1 on that part should fix you right up! :slight_smile:

Ben

7

Hi Elizabeth,
Not 100% sure, but when I look at the source of the page you provided, I can see no mention of the class hover01 ?
As per the html in the codepen
<div class=“hover01 column”>

Nice effects by the way, I’ll be sure to use them :slight_smile:

Regards, Dave

8

Alright! We’re half way there it seems. The overflow is working only for vertical. It still extendes horizontally. Just take a look at http://labs.websiteproject.ca/rollovers/ once again.

9

Hey Elizabeth,

This should fix it! :slight_smile:

.hover1 .fl-photo-content {
  overflow: hidden;
}

Ben