-3

I am beginner and using elementor page editor to build website. I need help to put a custom CSS code to hide the text when mouse is away and show text when mouse is moved in to the section. You can clearly get idea from here what i mean: https://crea.asia ... my client need same result.

YaduAllah Waqif Hussain
  • 1
  • i need this to be applied on description and a button. Here you can see my work on the page so far: https://nextcommerce.ae/our-services/?preview_id=89&preview_nonce=78074a5a71&preview=true – YaduAllah Waqif Hussain Oct 04 '20 at 11:56
  • Please provide the code you've got so far, preferably as a Snippet. The solution probably involves using the `:hover` pseudo-class and the `display:none` declaration. – Richard Hunter Oct 04 '20 at 13:38

2 Answers2

0

Based on your explication I made a very basic example. Of course you will need to work on nicer css and transition. But if this is your customer, I guess you get pay for it.

So you can easily make this kind of stuff by using :hover and play with display, by setting default none and block when hovering.

section{
  border: 1px solid black;
  min-height: 400px;
}
.description, section button{
  display:none;
}
section:hover .description, section:hover button{
  display: block;
}
<section>
  <h2>Title</h2>
  <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis pretium ipsum, nec pharetra augue porttitor vitae. Phasellus eget luctus eros, venenatis pharetra libero. Morbi volutpat turpis sed quam gravida lobortis sed sit amet eros. Nam in accumsan nibh. Donec placerat nulla magna, quis auctor dolor blandit quis. Morbi suscipit, est nec dignissim accumsan, risus nisl dapibus lectus, id ultrices sapien lectus nec urna. Mauris elementum maximus iaculis. Aenean arcu purus, scelerisque ut egestas id, auctor vel mi. In hac habitasse platea dictumst. Mauris convallis elit vitae consectetur laoreet. Fusce rutrum scelerisque purus, vitae pretium mauris ullamcorper a. Pellentesque malesuada vel massa eget dignissim. Quisque quis nisi ligula. Sed in dolor ac odio euismod vehicula. Suspendisse ornare nunc quis arcu iaculis efficitur.</div>
  <button>Read More</button>
</section
MaxiGui
  • 6,190
  • 4
  • 16
  • 33
0

.hoverTextMain {
display: block;
background: url(https://images.pexels.com/photos/4614987/pexels-photo-4614987.jpeg) no-repeat red;
background-size: cover;
height: 400px;
width: 500px;
text: align: center;
}
.hoverTextMain p {
padding: 20px;
color: #000;
font-size: 25px;
opacity: 0;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.hoverTextMain:hover p {
opacity: 1;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
<div class="hoverTextMain">
<p>Lorem ipsum dolor sit amet</p>
</div>

Please look at the example if it's ok or not.

Ishita Ray
  • 672
  • 3
  • 8