I figured out a way around this - to put the images on the background of a div container inside the aside rather than them being block elements in the html...
Positioned element appears outside of container on hover in Chrome
-
25-06-2023 - |
题
I'm trying to make my own simple circular transition hover. I've got this far:
aside{
width:183px;
height:183px;
position:absolute;
text-align:center;
border-radius:600px;
-moz-border-radius:600px;
border:10px #fff solid;
overflow:hidden;
cursor:pointer;
background:#fff;
box-shadow: 1px 1px 5px 2px #888888;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
aside:hover{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
border-color:#ccc;
}
aside img{
width:183px;
height:183px;
position:absolute;
border-radius:600px;
-moz-border-radius:600px;
top:0;
left:0;
margin:0;
opacity:1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
aside:hover img{
opacity:0.5;
width:165px;
height:165px;
top:10px;
left:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
aside h2{
position:absolute;
z-index:200;
bottom:0;
width:183px;
margin:0;
padding:5px 0 10px 0;
color:#fff;
text-transform:uppercase;
font-size:14px;
font-weight:bold;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
background:#333;
}
<aside class="courses">
<a href="http://www.google.com">
<h2>Courses</h2>
<img src="http://placehold.it/183x183" alt="" />
</a>
</aside>
Works as intended in Firefox, but on Chrome (mac) the h2 element appears outside of the border-radius overflow on the container only on hover.
Any ideas for a workaround for this keeping it pure CSS?
Thanks in advance
Pat
解决方案
不隶属于 StackOverflow