Whenever I hover over the purple text, I want it to increase in size using the zoom property.
Here is an example:
I am facing two issues:
The time duration does not seem to work even when I try to apply it within the hover and non-hover classes.
When my cursor is positioned at the top of the purple text, it creates a constant loop of zooming in and out.
Below is the relevant code, any assistance would be greatly appreciated!
**I want the duration property to be applied within the initial class for a consistent effect when hovering and leaving the mouse pointer.
body {
margin: 0 auto;
overflow-x: hidden;
}
#divStyle1 {
height: 90vh;
background-color: #016087;
}
#purpuleLineBox {
position: absolute;
top: 25%;
}
#purpuleLine1 {
background-color: #D52C82;
height: 7vh;
width: 30vw;
margin-bottom: 30px;
}
#purpuleLine2 {
background-color: #D52C82;
height: 7vh;
width: 38vw;
margin-bottom: 30px;
}
#purpuleLine3 {
background-color: #D52C82;
height: 7vh;
width: 42vw;
margin-bottom: 30px;
}
#purpuleLine4 {
background-color: #D52C82;
height: 7vh;
width: 50.5vw;
margin-bottom: 30px;
}
#purpuleLine5 {
background-color: #D52C82;
height: 7vh;
width: 52.5vw;
margin-bottom: 30px;
}
div>p {
color: white;
text-shadow: 2px 2px black;
font-weight: bold;
font-size: 2vw;
margin-left: 7px;
position: relative;
top: 5%;
}
.purpuleHover {
zoom: 100%;
transition-duration: 0.5s;
}
.purpuleHover:hover {
zoom: 120%;
}<div id="divStyle2">
<main>
<div id="purpuleLineBox">
<div id="purpuleLine1" class="purpuleHover">
<p>100% recyclable and bio-degradable</p>
</div>
<div id="purpuleLine2" class="purpuleHover">
<p>Simulates the natural ripening process, organic</p>
</div>
<div id="purpuleLine3" class="purpuleHover">
<p>The quickest way to achieve the perfect avocado taste</p>
</div>
<div id="purpuleLine4" class="purpuleHover">
<p>Work with Mango, Banana, Peach, and another climacteric fruits</p>
</div>
<div id="purpuleLine5" class="purpuleHover">
<p>The user interface on the bag shows when an avocado is fully ripen</p>
</div>
</div>
</main>
</div>