Question

I have two links, one with a header, and one with a picture. I want it so that when you hover over either of the links, the image increases in size.

I've been able to make the image increase when I hover over it, but not when I hover over the header.

Here's what I have tried.

.kategori-box-col img {
  width: 150px;
  height: 150px;
  margin: 10px;
}
.kategori-box-col a {
  color: darkslategrey;
  text-decoration: none;
  background-color: none;
}
.kategori-box-col a h3:hover {
  color: black;
  background-color: #f5f5f5;
}
.kategori-box-col a:hover img {
  width: 200px;
  height: 200px;
}

<div class="row kategori-box">
  <div class="col-md-3 col-sm-6 col-xs-12 kategori-box-col">
    <a href="#"><h3> Ders Kitapları </h3></a>
    <a href="#">
      <img src="~/Content/images/kitap/open-textbooks1.jpg" class="img-circle img-responsive" />
    </a>
  </div>
</div>

Answer 1

将悬停移动到容器div（.kategori-box-col）上，如下所示

.kategori-box-col img {
  width: 150px;
  height: 150px;
  margin: 10px;
}
.kategori-box-col a {
  color: darkslategrey;
  text-decoration: none;
  background-color: none;
}
.kategori-box-col a h3:hover {
  color: black;
  background-color: #f5f5f5;
}
.kategori-box-col:hover a img {
  width: 200px;
  height: 200px;
}

<div class="row kategori-box">
  <div class="col-md-3 col-sm-6 col-xs-12 kategori-box-col">
    <a href="#"><h3> Ders Kitapları </h3></a>
    <a href="#">
      <img src="http://placehold.it/350x150" class="img-circle img-responsive" />
    </a>
  </div>
</div>

Answer 2

我希望这会对你有所帮助

＆＃13;

.kategori-box-col img{
    width:150px;
    height:150px;
    margin:10px;
    transition:all 1s ease-in-out;
}

.kategori-box-col a{
    color:darkslategrey;
    text-decoration:none;
    background-color:none;
}

.kategori-box-col a h3:hover{
    color:black;
    background-color:#f5f5f5;

}
.kategori-box-col > a:hover
+ a > img{
transform:scale(1.2)
}

＆＃13;

<div class="row kategori-box">
    <div class="col-md-3 col-sm-6 col-xs-12 kategori-box-col">
        <a href="#"><h3> Ders Kitapları </h3></a>
        <a href="#"><img src="http://a1.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon256.png" class="img-circle img-responsive"/></a>
    </div>
 </div>

＆＃13;

Answer 3

请参阅此fiddle

添加此css

.kategori-box-col img{
  -webkit-transition: width 2s, height 2s;
  transition:  width 2s, height 2s;
}

Answer 4

尝试以下css，这会让它看起来更好。希望你喜欢！

＆＃13;

.kategori-box-col a {
    -webkit-transition: all 0.4s ease; /* Safari and Chrome */
    -moz-transition: all 0.4s ease; /* Firefox */
    -ms-transition: all 0.4s ease; /* IE 9 */
    -o-transition: all 0.4s ease; /* Opera */
    transition: all 0.4s ease;
}
.kategori-box-col a:hover img{
    -webkit-transform:scale(1.05); /* Safari and Chrome */
    -moz-transform:scale(1.05); /* Firefox */
    -ms-transform:scale(1.05); /* IE 9 */
    -o-transform:scale(1.05); /* Opera */
     transform:scale(1.05);
}

＆＃13;

将鼠标悬停在<a> tag

4 个答案: