0

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/

tleydxdy
  • 21
  • 5
  • Could you not find out the original dimensions and set it to that? – Daniel_Knights Oct 20 '20 at 03:04
  • One option is to scale it down originally: `scale(0.5)` and then scale it normally on hover: `scale(1)` – Daniel_Knights Oct 20 '20 at 03:05
  • First [determine original size of the image](https://stackoverflow.com/a/1944298/7994967), then dynamically scale the image with javascript: `element.style.transform = "scale("+ originalWidth / 32 +")";` – Qiu Zhou Oct 20 '20 at 03:19
  • So this is impossible to do with only css? I'm not very familiar with javascript, but I'd imagine I wound need to attach some event to every emoji? and since they are generated dynamically I would need to loop over all the emojis regularly in case some was newly created? – tleydxdy Oct 20 '20 at 04:13
  • i hope this site help you https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale#:~:text=The%20scale()%20CSS%20function,transform%2Dfunction%3E%20data%20type. – Makwana Prahlad Oct 20 '20 at 05:09
  • I thought about setting the margin to a negative number size down the element, but percentage margin 100% is relative to it's parent's width, not the element itself. it seems all road leads to doom :( – tleydxdy Oct 21 '20 at 02:50

2 Answers2

1

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
MaxiGui
  • 6,190
  • 4
  • 16
  • 33
  • 1
    This is almost working, the problem is upon hover the image lost it's original place. it leads to problems when there's mutiple image in a row, where the other image will just flow together. – tleydxdy Oct 20 '20 at 13:51
  • @tleydxdy Have a look to the new demo I updated based on your code. – MaxiGui Oct 20 '20 at 18:26
  • @tleydxdy check demo 3, it will work with any pricture no matter what. – MaxiGui Oct 21 '20 at 09:08
  • yeah, it seems like the only way to make it work is to tweak the html :( – tleydxdy Oct 21 '20 at 10:08
  • Yeah after you might try to use `mouseover` in js. that could help you. Here I really tried to stay with pure css – MaxiGui Oct 21 '20 at 10:10
0

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);}

DanielAfriheart
  • 21
  • 3
  • When answering an HTML/CSS question it's often helpful to add a snippet to your answer, which can be rendered inside the page and your code's effects can be seen clearly. – scatter Jul 29 '22 at 03:44