seo Question posted in
Some basic information to get you started with this can be found here.

Action for image on hover by css – SEO

I have one question about css. Here is example.
html:

<div class="image"></div>

css: 

.image {
    width: 250px;
    height: 250px;
    background-image: url(image.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.image:hover {
    background-size: 120% 120%;
}

So In this example everything working fine. When I hover on image, image is zoomed. However I have a lot of images like this and it’s not good for SEO to use for every image div, and I want to use < img > tag but there isn’t such thing like “background-size”. Is there any way to do so with img?

Tags:

4

Answers


  1. 0

    Try This:

    .image {
    width: 250px;
    height: 250px;
    margin: 100px;

}

.image:hover {
    transform: scale(1.5);
}
    <img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA">
    Login or Signup to reply.
  2. 0

    Please try this. I have done by scale property.

    .image{
  display:inline-block;
  width:200px;
  height:200px;
}
.image img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  -webkit-transition:0.5s;
  transition:0.5s;
}
.image:hover img {
  -webkit-transform:scale(1.1);
  transform:scale(1.1);
}
    <div class="image">
  <img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
    Login or Signup to reply.
  3. 0

    Hope this snippet helps you.

    .image{
  display:inline-block;
  width:250px;
  height:250px;
  overflow: hidden;
}
.image img{
  width:100%;
  height:100%;
  transition:all 0.5s ease;
}
.image:hover img {
  transform:scale(1.2);
}
    <div class="image">
  <img src="https://dummyimage.com/250x250/000/fff" alt="" />
</div>
    Login or Signup to reply.
  4. 0

    I don’t really get what you want to achieve but in your code

    <div class="image"></div>

    is equivalent in display to

    <div><img class="image" /></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search