HTML / CSS code not working
I'm working on some custom CSS for our webpage. However, the two placements for CSS is very confusing and there is really not enough information regarding the placement within your documentation.
- I have four columns with four different images that I would like to add this same effect to.
- When I add CSS classes to the advanced and then go into the Betheme Options custom CSS and add code there it deletes the entire image.
- The code moves the the image - and the blue slates cut short and repeat, I do not want the blue to repeat, I'd like to expand to cover the bottom image.
- The text should come down with the blue slates and cover the entire image underneath.
- Not sure where I put the text...
Please let me know how I can fix this.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-image:url("https://crabpuff.getacoolbox.com/wp/wp-content/uploads/2023/02/Slats_Blue.png");
![https://crabpuff.getacoolbox.com/wp/wp-content/uploads/2023/02/Slats_Blue.png");](https://crabpuff.getacoolbox.com/wp/wp-content/uploads/2023/02/Slats_Blue.png");){kind=link}
background-position: cover;
overflow: hidden;
width: 100%;
height:0;
transition: 1.25s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
color: white;
font-size: 16px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<h2>Slide Over the Image</h2>
<p>Hover over the image to change.</p>
<div class="container">
<img src="https://crabpuff.getacoolbox.com/wp/wp-content/uploads/2023/02/CorpWarehouse-1.png" alt="Avatar" class="image">
![https://crabpuff.getacoolbox.com/wp/wp-content/uploads/2023/02/CorpWarehouse-1.png"](https://crabpuff.getacoolbox.com/wp/wp-content/uploads/2023/02/CorpWarehouse-1.png"){kind=link}
<div class="overlay">
<div class="text"><strong>Title</strong><br><br>Notes here.</div>
</div>
</div>
</body>
</html>
Comments
Hi,
Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.
Thanks
So that's it? "we can't help you, your site's not live"
.....
Sorry that you interpreted it this way, but this is not what I meant. It is just really hard for us to provide appropriate help without the possibility of taking a look at the website.
Currently, I cannot check what you already created on your website, how it works, and what I can suggest to improve it.
Now, I can only suggest you use the Hover Box element or check the following link:
https://support.muffingroup.com/how-to/how-to-add-custom-classes-and-css/
Best regards