CODEWITHSUNDEEP
css
tleydxdy
tleydxdy

Reputation: 21

Scale image to original size on hover

I have some text mixed with emoji (small images), currently I have a feature where if you mouse over those emojis they will enlarge in-place, this is done using the following css

.emoji:hover {
  transform: scale(2);
}
.emoji {
  width: 32px;
  height: 32px;
  transition: all 0.2s ease;
}

I want to have the emojis scale to their original size, rather than to a fixed amount, kinda like the following

.emoji:hover {
  width: auto;
  height: auto;
}
.emoji {
  width: 32px;
  height: 32px;
  transition: all 0.2s ease;
}

Yet this have the undesirable side-effect of re-flowing the text which transform: scale(2) doesn't have. Is there some way around it?

a working example: https://jsfiddle.net/05eanuf4/

Upvotes: 0

Views: 1560

Answers (2)

DanielAfriheart
DanielAfriheart

Reputation: 41

Add a unique class name that can be used across other images you'd want to scale on your project... I'm using "scale" as my unique class name, and then add styles:

.scale {transition: all .2s ease-in-out;}

.scale:hover {transform: scale(1.01);}

Upvotes: 0

MaxiGui
MaxiGui

Reputation: 6348

Here a solution only with CSS.

DEMO hover emoji 2:

body{
  margin:0;
}

.emoji, .emoji2 {
  width: 32px;
  height: 32px;
  transition: all 0.2s ease;
}

.emoji:hover {
  transform: scale(2);
}

.emoji2:hover{
  position: absolute;
  height: auto;
  width: auto;
  /*max-height:100vh; /* LIMIT THE HEIGHT to the height of the screen */
  /*max-width: 100vw; /* LIMIT THE WIDTH to the width of the screen */
}
<img src="https://images.freeimages.com/images/large-previews/322/indian-heads-1391201.jpg" alt="image" class="emoji" />
<br>
<br>
<h2> Hover to normal size</h2>
<img src="https://images.freeimages.com/images/large-previews/322/indian-heads-1391201.jpg" alt="image" class="emoji2" />

You can also check this subject: How to do "zoom on an image while a mouseover" when html & css are in the same editor page

DEMO 2 (based on code given):

.emoji {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  transition: all 0.2s ease;
}
span{
  width: 32px;
  height: 32px;
  position:relative;
  display: inline-block;
}
span:hover{
  background: url(https://wm.sdf.org/gallery/albums/userpics/10644/alice.png);
  background-size: 100%;
  top: 12px;
  margin-top:-12px;
}
span:hover .emoji {
  /*transform: scale(2);*/
  position:absolute;
  width:auto;
  height:auto;
  top: 32px;
}
text above text above text above text above
<br>
text in front <span><img src="https://wm.sdf.org/gallery/albums/userpics/10644/alice.png" alt=":alice:" title=":alice:" class="emoji"></span> <span><img src="https://wm.sdf.org/gallery/albums/userpics/10644/alice.png" alt=":alice:" title=":alice:" class="emoji"></span> <span><img src="https://wm.sdf.org/gallery/albums/userpics/10644/alice.png" alt=":alice:" title=":alice:" class="emoji"></span> some text behind
<br>
text below text below text below text below

You can also check this subject: How to do "zoom on an image while a mouseover" when html & css are in the same editor page

DEMO 3 (based on code given):

span{
  width: 32px;
  height: 32px;
  position:relative;
  display: inline-block;
}
.background{
  width: 100%;
  height: 100%;
}
.emoji {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  transition: all 0.2s ease;
  display:none;
}
span .background:hover + .emoji {
  /*transform: scale(2);*/
  position:absolute;
  width:auto;
  height:auto;
  top: 32px;
  display:block;
}
text above text above text above text above
<br>
text in front <span>
<img src="https://wm.sdf.org/gallery/albums/userpics/10644/alice.png" alt=":alice:" title=":alice:" class="background">
<img src="https://wm.sdf.org/gallery/albums/userpics/10644/alice.png" alt=":alice:" title=":alice:" class="emoji"></span> <span><img src="https://wm.sdf.org/gallery/albums/userpics/10644/alice.png" alt=":alice:" title=":alice:" class="background"><img src="https://wm.sdf.org/gallery/albums/userpics/10644/alice.png" alt=":alice:" title=":alice:" class="emoji"></span> <span><img src="https://wm.sdf.org/gallery/albums/userpics/10644/alice.png" alt=":alice:" title=":alice:" class="background"><img src="https://wm.sdf.org/gallery/albums/userpics/10644/alice.png" alt=":alice:" title=":alice:" class="emoji"></span> some text behind
<br>
text below text below text below text below

Upvotes: 1

Related Questions