[juppsanParticipant]

Hey!

I’m having trouble laying a layer of color on top of my image elements that disappear when you hover over it… I’m new to wordpress so would very much appreciate some help! 🙂

I’ve done it before like this (with bootstrap)

<div class=”imgWrap”>

<p class=”imgDescription red”>Sjömansgatan</p>
</div>

.red{
background: rgba(221, 111, 122, 0.3);
visibility: visible;
opacity: 1;
margin-bottom: -3px;
}

.imgWrap:hover .red {
visibility: hidden;
opacity: 0;
}

The site is wwww.banginteriorshelsinki.com, and I would like the effect on the columns in home page Section 2. So basically they have a thin layer of red (you can see the image underneath) and when you hover over it the red disappears.

Thank you so much if you can help me!! 🙂

[ChristopherModerator]

Hi there,

The provided URL is not working, please check.

Thanks.

[juppsanParticipant]

This reply has been marked as private.

[juppsanParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Unfortunately we can’t give you any IP address as we don’t know who will check this thread next. However if you set your reply private that means it’s only visible to our Staff and you. So, you know better how you will give us access to check your site.

Thanks

[juppsanParticipant]

Hi!

I’m looking for a way to showcase some images on my website.

I like the look of this webpage http://www.artilleriet.se/shop/the-kitchen/#pencil-platters where when you click on the squares a field pops down with more info& images. (sorry for the swedish!)

Is there a way to do this on x theme? Get a box to pop down with a slideshow? 😀

Im new to wordpress so baby steps are much appreciated! Thanks!

[juppsanParticipant]

The website is for an interior design firm.. any other way to showcase their work is also appreciated!

[FriechModerator]

Hi There,

Have you seen the Responsive Lightbox shortcode? It is a cool modal box to showcase images and videos. It doesn’t display more info/description though.

You can install the Under Construction Extension of X|Theme under Addons > Extensions and enable it. So those who have login credentials are the only one can view the site.

Thanks!

[juppsanParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

This isn’t possible out of the box and requires custom development to achieve. While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

So, add an Image element and enable Link (see: http://prntscr.com/896n1s). Then add a class of color-overlay under Class field of your image settings (see: http://prntscr.com/7qeolc). Then add following CSS code under Custom > CSS in the Customizer:

.x-img.color-overlay {
    background-color: #000;
    display: inline-block;
}

.x-img.color-overlay:hover,
.x-img.color-overlay:not(.x-img-thumbnail):hover {
    opacity: 1;
}

.x-img.color-overlay > img {
    opacity: 0.4;
    -webkit-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}

.x-img.color-overlay:hover > img {
    opacity: 1;
}

Replace #000 with your desired color (you can generate hex color codes from here). To increase/decrease the opacity level, adjust 0.4 from the code to your desired value from 0 to 1.

Thanks!

[juppsanParticipant]

Thank you so much for your help!

The problem is now the white layer that appears when you hover over the link, it’s still there. and the color does not disappear when you hover over it.

Got any ideas? But this was a great start!!

[LelyModerator]

Hello There,

Are you referring to the images on the following URL:
http://banginteriorshelsinki.com/index.php/cases/
http://banginteriorshelsinki.com/index.php/about/

Upon checking, the white overlay disappears when I hovered on the image. Can clarify the issue?

[bakParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

There is no image in section #25, please see the attachment.

Please check the URL/section number again.

Thanks.

[Author]

Posts