0

Create a transition effect on Read More button

Basically there are two div one on right and second on left . Left is about info and Right is about an image . I want to create a top to bottom transition effect on info section to display information. But I my code transmission taking place when I will hover on information section and Read more button also . But I want that transition effect only when someone will hover on that read more button . It should not work when it is hover on the info section. I am attaching a code for your reference. Please help https://code.sololearn.com/W1Ve7xV7F4nP/?ref=app

25th Jul 2023, 11:42 AM
Om Yele
Om Yele - avatar
4 Réponses
+ 1
first add javascript code <script> document.addEventListener('DOMContentLoaded', function() { const readMoreButton = document.querySelector('.readmore'); const specialistDetails = document.querySelector('.specialistdetails'); readMoreButton.addEventListener('mouseover', function() { specialistDetails.style.top = '0'; }); readMoreButton.addEventListener('mouseout', function() { specialistDetails.style.top = '-100%'; }); }); </script> next css code .specialistdetails { position: absolute; background-color: rgba(0, 0, 0, 0.8); top: -100%; left: 0; width: 100%; height: 100%; transition: all 0.5s; pointer-events: none; /* Tambahkan baris ini agar elemen tidak dapat diakses saat tersembunyi */ } .specialistinfo:hover .specialistdetails { top: 0; pointer-events: initial; /* Kembalikan pointer events saat tombol "Read More" di-hover */ }
27th Jul 2023, 6:47 AM
GUNTUR MELLINIAWAN
GUNTUR MELLINIAWAN - avatar
+ 1
you're welcome, help like my answer if it helps
29th Jul 2023, 5:35 AM
GUNTUR MELLINIAWAN
GUNTUR MELLINIAWAN - avatar
0
Thankyou very much GUNTUR MELLINIAWAN
27th Jul 2023, 7:44 AM
Om Yele
Om Yele - avatar
0
I don't able to send message on sololearn . Popup comes that you didn't activated your email. But I had already activated it
27th Jul 2023, 7:46 AM
Om Yele
Om Yele - avatar