Cornerstone edits showing as correct, but outside of cornerstone they're very wrong

[emurrell17]

So, I need to make these images have a hover effect where they get darker and white text shows up–but only on the hover. I read some older forum posts here and I got kind of close by customizing the css and adding the images via raw content instead of just adding the image elements, since I couldn’t add the text on those…or I thought I was close. I’ve gotten to the point where just about everything looks and functions the way it should within Cornerstone. But when I double check in another browser it looks absolutely horrible.

I have the images in a row that’s split into 5 columns, and it seems like–even though this isn’t the case in cornerstone–that all of the content below this row on the rest of the homepage is getting sucked into the first column of a 5 column section. Which I just don’t understand how that could be happening.

If anyone could help me fix this, it would be much appreciated

Edit: Also in cornerstone the hover effects for the text function properly, but outside of cornerstone they don’t. So that’s not working either, but this might be fixed when they main issue is fixed?

[paul.r]

Hi,

I checked and can see your html are badly structured.

For example, you have this

<div class="x-img man x-img link x-img-none">
<a href="https://randylpurcell.com/farm-life/"><img src="https://randylpurcell.com/wp-content/uploads/2019/01/1sports.png" alt="farm"
</div>
</a>

<div class="shadow p">
<p><span>Sports</p></span></div>

It should be

<div class="x-img man x-img link x-img-none">
     <a href="https://randylpurcell.com/farm-life/">
          <img src="https://randylpurcell.com/wp-content/uploads/2019/01/1sports.png" alt="farm">
     </a>
</div>


<div class="shadow p">
        <p><span>Sports</span></p>
</div>

HTML tags should be “nested” in a proper order, meaning that the tag opened most recently is always the next tag to close.

Fore more info please refer to the links below

What Are Nested HTML Tags and How Are They Used?

https://www.w3schools.com/html/html_elements.asp

Hope this helps

[emurrell17]

Thanks man! That did the trick.

I have one other question if you don’t mind. Do you by chance know what’s wrong with the css I put in for that page? All I’m trying to do is make the hover action for the hexagon images be to darken the image and bring white text into the center.

I thought I had it working, but messed something with the text up. Even then I don’t think I had it the actual right way. Right now it’s performing this weird action where when the image gets hovered over it darkens like I want it to, but it only does this around the edges…when you hover over the center, where the text that will take them to the next page will be, it returns to normal…which looks not good obviously.

And then the text is gone now, but I didn’t like the ease transition it had anyway.

If anybody could help with this you’d be a life saver!

[friech]

Hi @emurrell17,

I did go ahead and fix those issue, the hover issue is caused by this:

The other issue why your text is not showing up on hover is because of this:

.shadow.p :hover { opacity: .5;}

The hover effect should happen at the same time the image fade right? so the :hover should be applied to .x-raw-content:hover, I did go ahead and replace that with this:

.x-raw-content:hover .shadow.p {
	opacity: 1;	
}

Now there is remaining issue that I can’t resolve because of how your structure things, notice the text does not became 100% opacity, that is because, on hover you applied the opacity: .5; on the RAW Content element, and everything inside that raw (image, text) will also became 50% transparent.

Regretfully, further customization from here would fall outside of the scope of support that we can offer.

And another thing, your <img> tag has no closing bracket />

Please correct that or it will cause an issue on the elements underneath it.

Thanks,