Remember me

Caption Hover Effect 5 - Height of Box

7 years 7 months ago #1

  • Tobias's Avatar
  • Tobias
Hi,

we would like to change the height of the "caption hover effect 5" box.
It's 100px at the moment, but we would like to reduce this into 50px.

Our main problem is, that the image movement on mouseover need to be reduced too?!?

Please let me know your opinion.

best regards
Safak

7 years 7 months ago #2

  • Artem's Avatar
  • Artem
  • Posts: 11342
Hi,

Here is solution
.ba-album.css-style-5 .ba-album-items:hover img, 
.ba-gallery-grid.css-style-5 .ba-image:hover img {
    -webkit-transform: translate(0, -50px) !important;
    transform: translate(0, -50px) !important;
}

.ba-album.css-style-5 .ba-caption, 
.ba-gallery-grid.css-style-5 .ba-caption {
    height: 50px !important;
}

Add this code to your template custom.css file ;)

Regards,

7 years 7 months ago #3

  • Tobias's Avatar
  • Tobias
Thank you :) Great! Works.

I would ask one more question:
Is it possible to make different colors for Caption Bg?

Best regards
Safak

7 years 7 months ago #4

  • Artem's Avatar
  • Artem
  • Posts: 11342
Yes, using CSS3 :nth-child() Selector

Try to add this code and you will see results.
.ba-gallery-items:nth-child(2) .ba-caption {
    background-color: #6200FF !important;
}

.ba-gallery-items:nth-child(3) .ba-caption {
    background-color: #F00 !important;
}

.ba-gallery-items:nth-child(4) .ba-caption {
    background-color: #63FF02 !important;
}

More about nth-child you can find here
www.w3schools.com/cssref/sel_nth-child.asp

Regards,

7 years 7 months ago #5

  • Tobias's Avatar
  • Tobias
Perfect, i think that should help :) I will try this tomorrow.

Have a nice day!! And thank you!

Best regards
Safak
Powered by Kunena Forum