Topics

Kevin Powell - Community•3y ago

[solved] Img behave different in Chome?

I have an issue with images: They are above each other and I make one visible when hovering, this works just fine in any browser but Chrome. In chrome for some reason they height is different. They are the same size so that cant be it. Is there a known issue? plss help Im still learning this ._.

31 Replies

Jochem•3y ago

please check out #How To Ask Good Questions, we can't help without any code to look at

BeciiOP•3y ago

https://codepen.io/Becii/pen/mdGzYMj this works? I never used this before ^^

Jochem•3y ago

The images don't show up, but if you replace the HTML with this, it'll load some placeholders:

<div class="profil">
  <div class="p_name">Wallner Wilfried</div>
  <div class="p_img">
    <img src="https://picsum.photos/300/600" class="p_img_gray" alt="Wallner Wilfried">
    <img src="https://picsum.photos/300/600" class="p_img_fun" alt="Wallner Wilfried">
  </div>
  <div class="p_info">
    Hier kommt noch sehr interessante Info!
  </div>
</div>

<div class="profil">
  <div class="p_name">Wallner Wilfried</div>
  <div class="p_img">
    <img src="https://picsum.photos/300/600" class="p_img_gray" alt="Wallner Wilfried">
    <img src="https://picsum.photos/300/600" class="p_img_fun" alt="Wallner Wilfried">
  </div>
  <div class="p_info">
    Hier kommt noch sehr interessante Info!
  </div>
</div>

BeciiOP•3y ago

https://codepen.io/Becii/pen/mdGzYMj

CodePen

...

BeciiOP•3y ago

oh I see its weirdly moving this shouldnt happen

Monimolimnion•3y ago

You can't link to images on your computer in Codepen Use a placeholder image hosted online the problem is you're absolutely positioning your second image, but not your first image

BeciiOP•3y ago

oh ok best way to just pos both absolute and set a top I guess

Monimolimnion•3y ago

https://jsfiddle.net/AthenasOwl/5a4Lkwvz/1/

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Monimolimnion•3y ago

ideally you want to position the relative div using a regular layout method like flexbox avoid absolute positioning for anything but special cases

BeciiOP•3y ago

I actually have that stuff in a gridsystem

Monimolimnion•3y ago

ok then you probably also want to add a transition to the opacity change so it's a bit smoother, but I guess you may have already done that 🙂

BeciiOP•3y ago

actually not Im so afraid of traansitions I did use them with my nav and I still dont quite get them but I will try ^^ which one would you recommmend?

Monimolimnion•3y ago

not sure what you mean by which one

Monimolimnion•3y ago

https://jsfiddle.net/AthenasOwl/5a4Lkwvz/3/

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Monimolimnion•3y ago

just add transition: opacity 500ms to your .p_img .p_img_fun class

BeciiOP•3y ago

ohhh u are amazing ty so how do I tag this solved now? Im such a noob xD just sad it will be my dad Im using not this cute kitty q.q

Monimolimnion•3y ago

have your dad hold a kitty

Monimolimnion•3y ago

https://tenor.com/view/smart-thinking-thoughts-think-ponder-gif-7713620

Tenor

BeciiOP•3y ago

xD not good for a business website I think ok I will implement it to the real file now and prey it works

Monimolimnion•3y ago

you Germans are too serious 😹 Cats sell although you could be austrian in which case, entschuldigung 😄

BeciiOP•3y ago

Austrian but yes. I have nothing to say in this regard. hmm I broke something now q.q ahaha np used to it

Monimolimnion•3y ago

my mother grew up in Austria, I have no excuse

BeciiOP•3y ago

BeciiOP•3y ago

waahh this will make me crazy one day xD

Monimolimnion•3y ago

wow yeah that's not good 😄 your structure should be

<grid container>
  <grid element with relative>
      <img with absolute>
      <img with absolute>
  </grid element>
</grid container>

<grid container>
  <grid element with relative>
      <img with absolute>
      <img with absolute>
  </grid element>
</grid container>

BeciiOP•3y ago

its like its ignoring the grid?

Monimolimnion•3y ago

does your code reflect that structure? ⬆️

BeciiOP•3y ago

I have both img in a div and that div is in the grid when I have the img set to relative the grid works but the hover doesnt when I have them on absoolute the hover works but the grid not

Monimolimnion•3y ago

don't set the img to relative, set the div to relative you want the images positioned relative to the div

BeciiOP•3y ago

div is relative, img absolute still broken Im broken too q.q I was beeing to optimistic again ok so my solution was playing around with ticking of and on the position attribute in F12, turns out if both pictures are absolute it breaks only 1 is fine it somehow magicly works now on chrome too ty for your time @monimolimnion

Monimolimnion•3y ago

Np

Kevin Powell - Community Join

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

36KMembers

View on Discord

Did you find this page helpful?