responsive blog-preview-card wiht hover effect

Community feedback

• 

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 4 months ago

  Hi @Olewy,

  Congratulations on a great looking solution! It's very close to the original. I like your use of CSS variables and semantic HTML tags. Als you use clear and concise class names which I am a fan of!

  I'll try to answer your question about the object-position property.

  Your image is not taking up the full width and height of the parent. I suggest the following changes

  
  .blog-card__img {
      object-fit: cover;
      object-position: center;
      width: 100%;
      height: 100%;
      max-width: 100%;
  }
  

  .blog-card__img-wrapper {
      height: 190px;
      border-radius: 12px;
      margin-bottom: 10px;
  }
  

  This way everything displays correctly. Your image had some overflow issues which were not visible because you used overflow: hidden. If you remove that you can see that the image flows out of the card. This is because the image uses the same width and height it has as a file, and you have a fixed width on the card. You can fix the overflow issue by adding max-width: 100% to the image. This is common practice and useful to add to every project. If you make the changes you can see you can change the object-position now!

  I hope my explanation makes sense!

  If you have more questions feel free to ask me.

  Marked as helpful

  2

  ---

  

  Ole•50

  @OlewyPosted 4 months ago

  Hi @DylandeBruijn,

  first, thanks for your kind words and detailed explanation, it was very helpful to understand my problem.

  I don't want to just copy your solution and didn't learn anything, so I tried out changing the CSS properties till it works.

  Now, the picture lines up perfectly as well, but I didn't give the image a max-width:

  .blog-card__img-wrapper { height: 190px; border-radius: 12px; overflow: hidden; margin-bottom: 10px; }

  .blog-card__img { object-fit: cover; /* object-position: center; */ width: 100%; height: 100%; }

  I suggest giving the image 100% of height and width and not the parent element is the key factor here. Then I wouldn't even need object-position. But of course it ensures that the image is centred, which isn't bad.

  So, is this solution also fine?

  And what is the difference between max-width:100% and width: 100%? Is max-width there to ensure that the image, in your solution, don't overlap the parent element?

  Thanks in advance!

  PS: How do I make code and tags look like you? :D

  0

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @DylandeBruijn

  I'm sorry to interfering, but why use div wrapper at all?

  All those styling could be applied to img tag directly, even if we assume that the source can change time to time. Also the image can keep it's proportions without explicit height value.

  2

  

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 4 months ago

  Hi @Olewy,

  I'm glad I could be of help. Figuring things out by yourself and the willingness to deeply understand things are very good skills to have. Especially now that AI is getting really popular in combination with coding.

  What you did works as well because the .blog-card__img-wrapper is a block element which have a default width of auto so they take up all the space they can in a parent. Which in this case is the card which has a fixed width. The image inside this wrapper has a width of 100% so the image takes up 100% width of the wrapper. Now that I think of it you can also change the display property of all images in your project to display: block. Then you don't have to add the width: 100%. I add this piece of CSS to all my projects as a reset:

  img,
  picture,
  video,
  canvas,
  svg {
      display: block;
      max-width: 100%;
  }
  

  You can read up on a detailed explanation why this is useful here. Josh does a better job explaining than me! In the post there are a lot of CSS code pieces to reset things you might find interesting.

  It's true that you don't need the object-position. I just left it so you could experiment with it if you wanted. In most cases object-fit: cover does the trick.

  You are right that max-width: 100% ensures that the image doesn't overlap it's parent!

  As how to make code and tags look I do, you can wrap single line pieces of code in single backticks (`) and multi line pieces of code in triple backticks (```). If you click the "Markdown Help" button in the top left of the reply box you can read an explanation!

  I hope that answers your questions.

  2

  

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 4 months ago

  Hi @Alex-Archer-I,

  You are correct, a div wrapper is not needed and an image can keep it's proportions without explicit height. I was just trying to help @Olewy with his question about why the object-position property wasn't working! However there are use cases to wrap an img in a div, but in this case it's not needed.

  Thanks for your input!

  2

  

  Ole•50

  @OlewyPosted 4 months ago

  @Alex-Archer-I

  To be honest, I had this at the beginning of my challenge, but I just thought it would make it more semantic.

  But you're right. It would be much easier.

  2

  

  Ole•50

  @OlewyPosted 4 months ago

  @DylandeBruijn

  Thanks for another good explanation here.

  I will definitely look into the article and try to use your tips in my future challenges!

  2

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @DylandeBruijn

  Thanks =) The thing is I self-tauhght and have been seen this wrap practice for a while, but never can see a clear explanation why. I've tested a img tag several times and just can't help but have that weird felling that everyone around are doing something I can't fully catch =)

  I can understand the cases when you need a wrapper, but for the rest times I always for the reducing the number of tags =)

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @Olewy

  No, div have not any semantic meanings. Later, when you'll have a few images which need to be switched due to conditions you can use picture tag. It's both has a semantic value and technical purpose.

  <picture>
      <source srcset="mobile.jpg" media="(max-width: 900px)">
      <img src="desktop.jpg" alt="">
  </picture>
  

  This tag has a one or few source and one img. Than it looks for media conditions of sources and choose one which matches or img if no one does. It could be a bit advance for now, but keep in mind =)

  By the way, speaking about semantic, the web.dev says that the decorative images should have empty alt and role=none. I learned this not that long ago to fully proof, but web.dev made by chrome, so I guess it could have sense.

  Marked as helpful

  1