0
ホバー上で画像をアニメーション化しようとしています。私が望む結果はSee hereです（「私たちのチーム」の画像を見るにはスクロールしてください）ホバー上のエフェクト画像（CSS付き）
私はいくつかの情報（名前、リンク）を正確にこのテーマは達成できません。ここで
は私のコードです：
<div class="row">
<div class="col-md-6">
<div class="picture">
<div class="photoapropos center-block">
<div class="info">
<img class="img-responsive img-circle" alt="Name" src="<?= $url; ?>"/>
<p>Name</p>
</div>
</div>
</div>
</div>
</div>
そして、私のCSS：
.picture {
display: block;
opacity: 1;
}
.photoapropos{
display: block;
position: relative;
width: 425px;
height: 425px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.photoapropos:hover .info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.photoapropos .info {
position: absolute;
background: #FF8C00;
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
誰も私を助けることができるこの機能は実現しやすいように見えたが、私は、私が行方不明です何を見ていないので？
ありがとうございました。
テキストボックスでスライドしますか – Atula