Stefan Larsen Stefan Larsen - 7 months ago 10
HTML Question

Css going away when hover

i got this problem that when i hover over this video element then i lose the css (the border-radius) its on the video row. Does any of you have any idea what i can do to fix it?
http://hcl.konggulerodhosting.dk/index.html

.gallery-image {
border-radius: 10px;
position: relative;
overflow: hidden;
}

<div class="large-3 columns">
<div class="building-block-item">
<div>
<a href="https://www.youtube.com/embed/o7rdAH8oifo?fs=1&amp;autoplay=1&amp;rel=0. " class="gallery-video" data-featherlight="" data-featherlight-type="iframe">
<div class="gallery-image">
<div class="gallery-veil">
<h3>Høreprøve</h3>
</div>
<img src="assets/images/video/video.png?anchor=center&amp;mode=crop&amp;width=282&amp;height=190&amp;rnd=130965782700000000&amp;quality=90">
</div>
</a>
</div>
</div>
</div>

Answer

UPDATED Its because of transition so please remove transition from .gallery-image img

I have checked the code and found by removing overflow your div will go out of border(few px) so removing transition is better way. Your class will be look like this :

.gallery-image img
{
    width: 100% !important;
    max-width: 100% !important;
}
Comments