Ad

Get Smaller Images To Load In Full Quality When Hovered Over And Enlarged

- 1 answer

I have a list of items which contain an image and some text.

<ul id = "results"> {
  JSON.parse(this.state.data).resultCards.map(function(card) {
    return <li> <img src = {
      'https://image.deckbrew.com/mtg/multiverseid/'+.multiverseid +'.jpg'
    }
    />{card.deviation}</li > ;
  })
} < /ul>

For purposes of screen real estate, the images are loaded at a smaller size, and then re-enlarged to full size (311px) when hovered over. (This is a .scss stylesheet, if that matters.)

/* The card images within the list items. */
ul li img{
    height: 175px;
    padding: 3px;
    transition: 0.3s;
}

/* Those images when hovered over. */
ul li img:hover{
    height: 311px
}

The problem is that when the images are enlarged, they look fuzzy and low quality, since I assume they've been loaded at the smaller resolution. Is there any way to force the images to be loaded at full resolution, so that when hovering occurs, the resulting full-scale image looks normal?

Ad

Answer

Okay what I think the best thing to do is to load the images and then scale them down and back up again. This will maintain the aspect ratio, and should handle resolution all in css. an example of this would be

transform: scale(0.6, 0.6);
-ms-transform: scale(0.6, 0.6);
-webkit-transform: scale(0.6, 0.6);

This would scale the images down to 60%, then you can scale them back up the same way. You could also use Javascript and load the larger image in ajax, but I think that is a bit overkill. Either way this hopefully should fix you problem. Here is a link for further reading you can do on CSS3 2D Transform.

Ad
source: stackoverflow.com
Ad