[aptumkommunikasjonParticipant]

Hi!

My site is http://www.sorveiv.no/forside2

1. Is there a way to get certain images to have the same overlay, so you can only put an class and it will work on all of them? I want all my artist images on the front page to have an overlay (a scribble image) like in the first one (Maja Godicke). I’ve sorted it out right now with “onmouseover”, but that changes the image completely and with the grid it becomes so much code.
Is there a way to make a class with the scribble in png just overlay the images that I set the class on?

2. I have put up a custom menu as my header and lots of css to handle it. I suspect that this maybe out of your scope as they are put as divs into the header code, but I hope you can still maybe help me.
My problem is when viewing the site on mobile, my custom meny buttons doesn’t fill the div they are set in. They need to be the same size as the desktop one. I’ve tried several things, but can’t make it work. They are different divs depending on screen sizes, with their own css code.

[JoaoModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[aptumkommunikasjonParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for providing the information.

1] To resolve this issue and give a css code that you can use a custom class like custom-image-link and have an overlay in your image, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.custom-image-link {
    position: relative;
    display: block;
}

.custom-image-link:after {
    content: "";
    background-color: green;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s linear;
}

.custom-image-link:hover:after{
    opacity: 0.45;
}

.custom-image-link img {
    margin-bottom: 0;
}

Please make sure that your html code should be in this format:

<a class="custom-image-link" href="#"><img src="http://placehold.it/300x300/" alt="Your Image"></a>

2] Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[aptumkommunikasjonParticipant]

1. Thanks! I will try that out!

2. I’ve attached and image of what the buttons looks like on mobile right now, and how the buttons are in the desktop menu. I want the mobile ones to be the same as the desktop ones.
As the desktop ones are part of a wordpress menu, and the mobile ones aren’t I can’t seem to replicate the settings to have them the right size.

[RupokMember]

Hi there,

Thanks for writing back. That’s what i can see for your mobile menu – http://prntscr.com/c8y67o

Did you change anything? Let us know.

[aptumkommunikasjonParticipant]

No I haven’t touched the site since I last wrote in. So should have checked that is was visible for everyone..

But okay: I want the two custom buttons to be visible in both the desktop and mobile view.
In the desktop version they are part of the main menu, but I set them to “hide” when in mobile. So they wouldn’t interfere with the collapse function of the mobile menu.
I’ve inserted them as a div into the header code, just like the green band with place+date. But apparently they are not visible for you. Is there a way to do this better than what I’ve come up with..?

[aptumkommunikasjonParticipant]

After checking they are visible when minimizing the site in Chrome and Safari, but not Firefox.

[aptumkommunikasjonParticipant]

Back to 1. again:
I’ve added your code to one of my pages ( http://www.sorveiv.no/artister/ ), and tweaked it a bit to fit my needs. It works like I wanted to, so that’s great!
But the overlay image is too big and overlaps everything else on the page. Is there a way to make it “contain” within the image it’s displaying over? Or do I need to make the original overlay-image smaller?

[Paul RModerator]

Hi,

Sorry not sure what you trying to achieve

This is how your site looks on my end – http://screencast.com/t/OK423KHS0btT

Can you provide us more clarification on what you are trying to do.

Thanks

[aptumkommunikasjonParticipant]

The problem can be seen in one of the the attached screenshots. When you hover over the first image, the overlay is way to big.

I want the scribble overlay to only show on top of the image, like in the second screenshot (or possible a bit bigger).

(Sorry for multiple images, but it was giving me an error and I couldn’t delete them)

[RupokMember]

Hi there,

Thanks for clarifying. Kindly update this code :

.custom-image-link::after {
  content: url("http://www.sorveiv.no/wp-content/uploads/2016/08/Artist-rollover.png");
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.3s linear 0s;
  width: 100%;
}

to this :

.custom-image-link::after {
  background: url("http://www.sorveiv.no/wp-content/uploads/2016/08/Artist-rollover.png") repeat scroll 0 0 / 100% auto;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.3s linear 0s;
  width: 100%;
}

Hope this helps.

[Author]

Posts