This is all the style on that button and i want to make the click and apply to be hidden and when mouse is hovered the text appears just on hover and vanish when mouse is taken off
Html Code
<section class="call-to-action">
<h1>Enroll for various online courses<br>Anywhere from the world</h1>
<div class="click">Click</div> <div class="apply"> to Apply </div>
<a href="#">Call to Action</a>
</section>
Css Code
.call-to-action a
{
color: white;
text-decoration: none;
font-weight: bolder;
letter-spacing: 2px;
display: inline-block;
background: transparent;
padding: 20px 14px;
border: .9px solid beige;
cursor: pointer;
transition: 0.7s;
}
.call-to-action a:hover
{
color: white;
text-decoration: none;
font-weight: bolder;
display: inline-block;
background: rgb(221, 64, 53);
padding: 20px 14px;
border: 1px solid beige;
cursor: pointer;
transition: 0.7s ;
transform:scale(1.2,1.2);
}
.call-to-action .click
{
opacity: 0;
color: black;
font-size:20px ;
}
.call-to-action .apply
{
opacity: 0;
color: black;
font-size:20px ;
}
.call-to-action a:hover > .click
{
color: white;
position: absolute;
transform: translate(-40%,-40%);
font-size: 300px;
transition: 0.4s;
opacity: 1;
}
Can anyone help me in this situation
CodePudding user response：
.call-to-action a
{
color: white;
text-decoration: none;
font-weight: bolder;
letter-spacing: 2px;
display: inline-block;
background: transparent;
padding: 20px 14px;
border: .9px solid beige;
cursor: pointer;
transition: 0.7s;
}
.call-to-action a:hover
{
color: white;
text-decoration: none;
font-weight: bolder;
display: inline-block;
background: rgb(221, 64, 53);
padding: 20px 14px;
border: 1px solid beige;
cursor: pointer;
transition: 0.7s ;
transform:scale(1.2,1.2);
}
.call-to-action .click
{
opacity: 0;
color: black;
font-size:20px ;
}
.call-to-action .apply
{
opacity: 0;
color: black;
font-size:20px ;
}
.call-to-action a:hover > .click
{
color: white;
position: absolute;
transform: translate(-40%,-40%);
font-size: 300px;
transition: 0.4s;
opacity: 1;
}
.call-to-action .click, .call-to-action .apply{
transition: all 0.5s ease;
opacity: 0;
color: #000000;
}
.call-to-action .click:hover, .call-to-action .apply:hover{
opacity: 1;
}<section class="call-to-action">
<h1>Enroll for various online courses<br>Anywhere from the world</h1>
<div class="click">Click</div> <div class="apply"> to Apply </div>
<a href="#">Call to Action</a>
</section>CodePudding user response：
Checkout this method:
What happening here?
By default the opacity of click and apply text are 0.So its not visible to user. While you hovering on the text we change the opacity to 100% with trasition of 0.3second duration. So the text will be visible to use by a small fade-in animation.
Check the CSS code below
.call-to-action .click,
.call-to-action .apply{
transition: all 0.3s ease;
opacity: 0;
color: #000;
//other syles you need
}
.call-to-action .click:hover,
.call-to-action .apply:hover{
opacity: 1;
}CodePudding user response：
The CSS rules are applied from top to bottom and from parent to children.
You can't do CSS selections upwards or backwards to apply properties to a parent or earlier sibling element.
But you can wrap both elements within a container element to apply your styles.
.button-tooltip-container .tooltip {
opacity: 0;
}
.button-tooltip-container:hover .tooltip {
opacity: 1;
}<div class="button-tooltip-container">
<div class="tooltip">Button tooltip text</div>
<button>Call to Action</button>
</div>You should read this in order to get started with CSS selectors https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors