\n\nnext css code\n.specialistdetails {\n position: absolute;\n background-color: rgba(0, 0, 0, 0.8);\n top: -100%;\n left: 0;\n width: 100%;\n height: 100%;\n transition: all 0.5s;\n pointer-events: none; /* Tambahkan baris ini agar elemen tidak dapat diakses saat tersembunyi */\n}\n\n.specialistinfo:hover .specialistdetails {\n top: 0;\n pointer-events: initial; /* Kembalikan pointer events saat tombol \"Read More\" di-hover */\n}\n","upvoteCount":1},{"@type":"Answer","text":"you're welcome, help like my answer if it helps","upvoteCount":1},{"@type":"Answer","text":"Thankyou very much GUNTUR MELLINIAWAN","upvoteCount":0},{"@type":"Answer","text":"I don't able to send message on sololearn . Popup comes that you didn't activated your email. But I had already activated it","upvoteCount":0}]} }
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 Answers
+ 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