6 Replies - 2871 Views - Last Post: 05 November 2012 - 07:00 AM

#1 jolinar  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 35
  • Joined: 27-November 08

Ribbon image overlay CSS

Posted 02 November 2012 - 08:35 AM

I've been trying to find solution for my problem, but I couldn't find any that would work for me.

Problem:
I have a gallery of sorts and on some images, I'd like to place an image ribbon (NOT a CSS3) in the top left corner. The problem is, the thumbnails don't have equal width and height and are vertically aligned to the middle. (see attached image)

Right now the ribbon is okay on wide pictures, but with tall and thin the ribbon is off. Here's my code:
<div class="cat-img">
<div class="ribbon"></div>
<img src="images/demo1.jpg" alt="" title="" />
</div>

.cat-img {
  height: 220px;
  margin: 10px 0;
  position: relative;
  text-align: center
}
.cat-img img {
  padding: 8px;
  border: 1px solid #E5E5E5; 
  position: relative;
  z-index: 0;
}
.ribbon {
  background: url('images/ribbon.png') no-repeat;
  position: relative;
  z-index: 100;
  height: 67px;
  width: 73px;
  z-index: 10000;
}



Any help is much appreciated!

This post has been edited by jolinar: 02 November 2012 - 08:49 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Ribbon image overlay CSS

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 439
  • Joined: 28-July 09

Re: Ribbon image overlay CSS

Posted 02 November 2012 - 08:38 AM

Hello,

I feel we're going to need more things to help you here.

  • CSS relating to the HTML posted
  • The images you've used
  • Any surronding HTML that may help us debug


EDIT: You beat me to it with your edit, however, could you provide the images mentioned. :)

This post has been edited by Kruithne: 02 November 2012 - 08:38 AM

Was This Post Helpful? 0
  • +
  • -

#3 jolinar  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 35
  • Joined: 27-November 08

Re: Ribbon image overlay CSS

Posted 04 November 2012 - 02:07 AM

I'm using the Foundation CSS framework by Zurb for responsive layout. Here is the code:

<div class="row text-center">
  <div class="three columns cat-item">
    <h2>Title1</h2>
    <div class="cat-img">
      <div class="ribbon"></div>
      <img src="images/demo1.jpg" alt="" title="" />
    </div>
  </div>
  
  <div class="three columns cat-item">
        <h2>Title2</h2>
    <div class="cat-img">
      <div class="ribbon"></div>
      <img src="images/demo2.jpg" alt="" title="" />
    </div>
  </div>

<div class="three columns cat-item">
    <h2>Title1</h2>
    <div class="cat-img">
      <div class="ribbon"></div>
      <img src="images/demo1.jpg" alt="" title="" />
    </div>

</div>






and the relevant CSS:
.text-center {
text-align: center;
}
.row {
	width: 1000px;
	max-width: 100%;
	min-width: 768px;
	margin: 0 auto;
}

.column, .columns {
	float: left;
	min-height: 1px;
	padding: 0 15px;
	position: relative;
}
.three, .row .three {
	width: 25%;
}
.cat-img {
  height: 220px;
  margin: 10px 0;
  position: relative;
  text-align: center
}
.cat-img img {
  padding: 8px;
  border: 1px solid #E5E5E5; 
  position: relative;
  z-index: 0;
}
.ribbon {
  background: url('images/ribbon.png') no-repeat;
  position: relative;
  z-index: 100;
  height: 67px;
  width: 73px;
  z-index: 10000;
}



And the images are attached.

Thank you so much!

Attached image(s)

  • Attached Image
  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#4 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 439
  • Joined: 28-July 09

Re: Ribbon image overlay CSS

Posted 04 November 2012 - 11:11 AM

Could you also pop up images/ribbon.png, please?
Was This Post Helpful? 0
  • +
  • -

#5 jolinar  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 35
  • Joined: 27-November 08

Re: Ribbon image overlay CSS

Posted 05 November 2012 - 12:37 AM

Oh, sorry. :) Here it is.

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#6 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 439
  • Joined: 28-July 09

Re: Ribbon image overlay CSS

Posted 05 November 2012 - 02:20 AM

Hello,

I made some changes to your code and managed to achieve the effect I presume you were after, so I have put the placed code below and will do my best to explain it.

Firstly, we have the cat-img DIV which will contain two images, the 'image' and the ribbon for it, simple

<div class="cat-img">
		<img src="images/ribbon.png" class="ribbon"/>
		<img src="images/demo1.jpg" class="image" alt="" title=""/>
    </div>


Rather than having .cat-img img we have .cat-img .image to avoid applying the class to the ribbon, which is now an image. I have not changed any of the actual CSS for this class.

.cat-img .image {
  padding: 8px;
  border: 1px solid #E5E5E5; 
  position: relative;
  z-index: 0;
}


The ribbon class is now void of most of it's stuff as it's for an IMG rather than a DIV now. We keep the z-index in-place as your lower image has one set, although from my testing both of these z-index declarations are not needed.

Setting the position of the ribbon as absolute makes it become unrestrained by surrounding elements and as you have position: relative set to the parent of the ribbon, it floats relative to the DIV rather than the document.

.ribbon
{
  position: absolute;
  z-index: 1000;
}

This post has been edited by Kruithne: 05 November 2012 - 02:21 AM

Was This Post Helpful? 1
  • +
  • -

#7 jolinar  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 35
  • Joined: 27-November 08

Re: Ribbon image overlay CSS

Posted 05 November 2012 - 07:00 AM

Thank you so much, Kruithne! You're a star. :)

Also thank you for the explanation, I guess I was too frustrated with it that I didn't even think of having it as an image. :)

Thank you again! :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1