When visiting thedaystaragency.com/home and scrolling down to our services section where the lightbulbs are located, it is apparent that they are misaligned and not functioning properly. I have provided the code that I am currently using, but I had to remove the button temporarily because there seems to be an issue with Elementor not allowing the button to work correctly. Any recommendations for a solution would be greatly appreciated! :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<title>Change Image on Hover in CSS</title>
<style>
#myBtn{
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
#lightbulb:hover img{
content:url("https://thedaystaragency.com/wp-content/uploads/2020/03/rsz_11logomakr_2srycx.png");
}
#lightbulb:hover p { font-weight:bold; }
}
</style>
</head>
<body>
<center>
<div id=lightbulb >
<img src="https://thedaystaragency.com/wp-content/uploads/2020/03/rsz_4rsz_logomakr_3ijkr2.png" onmouseover=this.src="https://thedaystaragency.com/wp-content/uploads/2020/03/rsz_11logomakr_2srycx.png" onmouseout=this.src="https://thedaystaragency.com/wp-content/uploads/2020/03/rsz_4rsz_logomakr_3ijkr2.png" width=25px;> <br> <br> <h2> hi</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>}
Regarding the button, I am attempting to achieve something similar to this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>
<h2>Read More Read Less Button</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<script>
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>
</body>
</html>