CSS-Transformation verbirgt floated Element darüber

Question

Ich mache eine einfache Blogpostbox mit bin Bild an der Spitze. Wenn die Maus über die Box schwebt, wird das Bild auf 1.1 skaliert und der Überlauf wird ausgeblendet.

Der Blog Post DIV ist relativ eingestellt und ich habe ein Symbol über dem Bild, das auf absolut eingestellt ist, so dass es halb oben auf dem Bild und halb über sitzt. Das Problem: Wenn die Maus über das DIV hoofert, skaliert das Bild wie es sollte, aber der Teil des Symbols, der über dem Bild sitzt, verschwindet.

Wie kann ich dies stoppen, damit das Symbol sichtbar bleibt, wenn die Maßstabsumwandlung stattfindet?

Danke für die Hilfe.

HTML

<a href="#"> 
<div class="blog_slot"> 

<div class="blog_icon"> 
<img src="\adrenicon.jpg" style="width:50px; height:50px;" 

alt="adrenicon"> 
</div> 

<div class="blog_image"> 
<img src="\image.jpg" alt="xxxxx"> 
</div> 
<div class="blog_title"> 
<H2>xxx</H2> 
<H3>xxxxxxxxx</H3> 
</div> 
<p>xxxxxxxxxxxx</p> 
<p>... 
<p>Read More</p> 

</div> 
</a> 

und die CSS

.blog_icon { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: -25px; 
    left: 0; 

} 


.blog_slot { 
    position: relative; 
    max-width:500px; 
    min-width:200px; 
    border-style: solid; 
    border-width: 5px; 
    border-color: #FFD657; 
    text-align: center; 
    } 

.blog_image 
{ 

    overflow: hidden;} 

.blog_image img { 
    width:100%; 
    max-width:450; 
    height:100%; 


    -moz-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 

} 

.blog_slot:hover .blog_image img { 

    -moz-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
} 

Answer 1

Hoffnung das Ihr Problem löst. Ich habe z-index zu .blog-icon hinzugefügt.

.blog_icon { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: -25px; 
 
    left: 0; 
 
    z-index: 1; 
 
} 
 
.blog_slot { 
 
    position: relative; 
 
    max-width:500px; 
 
    min-width:200px; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    border-color: #FFD657; 
 
    text-align: center; 
 
} 
 

 
.blog_image { 
 
    overflow: hidden; 
 
} 
 

 
.blog_image img { 
 
    width:100%; 
 
    max-width:450; 
 
    height:100%; 
 

 
    -moz-transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
    transition: all 0.5s; 
 

 
} 
 

 
.blog_slot:hover .blog_image img { 
 
    -moz-transform: scale(1.1); 
 
    -webkit-transform: scale(1.1); 
 
    transform: scale(1.1); 
 
}

<a href="#"> 
 
<div class="blog_slot"> 
 

 
<div class="blog_icon"> 
 
<img src="https://unsplash.it/50/60/?random" style="width:50px; height:50px;" alt="adrenicon"> 
 
</div> 
 

 
<div class="blog_image"> 
 
<img src="https://unsplash.it/800/1200/?random" alt="xxxxx"> 
 
</div> 
 
<div class="blog_title"> 
 
<H2>xxx</H2> 
 
<H3>xxxxxxxxx</H3> 
 
</div> 
 
<p>xxxxxxxxxxxx</p> 
 
<p>... 
 
<p>Read More</p> 
 

 
</div> 
 
</a>