Bildwechsel mit
‹mouse over›
ohne DIVI Pagebuilder
Code ‹html›
<div class=»image-container»>
<img src=»https://www.kaformatik.ch/wp-content/uploads/2024/04/2024.04.21_peter06.jpg» alt=»peter06″>
<img src=»https://www.kaformatik.ch/wp-content/uploads/2024/04/2024.04.21_peter01.jpg» alt=»peter01″>
</div>
Code ‹css›
.image-container {
display: inline-block;
overflow: hidden;
border: 7px solid #0272BC; /* Initial border */
transition: border 0.5s; /* Only transition border */
}
.image-container img {
display: block;
transition: opacity 0.5s;
}
.image-container img:first-child {
position: absolute;
opacity: 0;
}
.image-container:hover {
border: none; /* Remove border on hover */
}
.image-container:hover::after {
content: »;
display: block;
border: 7px solid #0272BC; /* Add border back after translation */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none; /* Ensure it doesn’t interfere with hover */
}
.image-container:hover img:first-child {
opacity: 1;
}
.image-container:hover img:last-child {
opacity: 0;
}
/* Ensure no transform property is applied to the image */
.image-container img {
transform: none; /* Prevent any movement */
}