Create a transition effect on Read More button

Question

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

Answer 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 */
}

Answer 2

you're welcome, help like my answer if it helps

Answer 3

Thankyou very much GUNTUR MELLINIAWAN

Answer 4

I don't able to send message on sololearn . Popup comes that you didn't activated your email. But I had already activated it