0
イメージを円の形にします。その上にマウスを置くと、背景が無地の色に変わり、テキストが表示されます。これは私がこれまで行ってきたことですが、それはうまくいきますが、堅実な背景が四角で始まり、円の色が変化するのではなく、円に変わりますか？イメージホバーは背景色を変更してテキストを追加します
おかげ
$(document).ready(function() {
$(".abutton").click(function() {
$('.path').attr('class', 'path path-animation');
setTimeout(function() {
$('.path').attr('class', 'path path-op');
$(".abutton").attr("disabled","disabled");
}, 5000);
});
});.slideTextUp img {
margin-top:20px;
}
.slideTextUp div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
text-align: center;
display: table;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.slideTextUp div:nth-child(2) {
top: 100%;
}
.slideTextUp:hover div {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
background-color: red;
}
svg {
margin: -20px 70px;
}
.dashed{
stroke-dasharray: 10;
}
.path {
opacity: 0;
}
.path-op {
opacity: 1 !important;
}
.image-cropper {
background-size: cover;
background-image: url("/pageassets/test1/ruth.jpg");
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
display: inline-block;
cursor: pointer;
cursor: hand;
}
.image-cropper {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.image-cropper:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.image-cropper img {
display: inline;
margin: 0 auto;
height: 100%;
width: 100%;
}
.path-animation {
\t stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear 1;
opacity: 1;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-cropper abutton slideTextUp">
<div class="rounded bg1"></div>
<div>
<h4 style="font-size: 11px !important;">Person</h4>
<p style="font-size: 11px !important;">Some text about person</p>
</div>
</div>