CSS - image overflow tricks

Question

I'm stucking with some design techniques where I want to make image item box like this

enter image description here

Where the actual image can be upto maximum height of 300px and width of 225px. The width and height of the item box including the image and the text is 190px x 190px I'm using this image http://farm8.staticflickr.com/7122/7424355198_72620895bd_m.jpg

I tried using overflow: hidden for the image item to hide it's height below to show the image text. But I'm getting only like this http://jsfiddle.net/Dkh4q/

Could anyone tell the mistake I've done?

Thanks!

UPDATE

For more information about the expected result, if you can login to zerply, then please check this http://zerply.com/christievdc/portfolio for example.

SUMMARY

Finally it's a silly mistake I've done that I put extra } thing in addmenu-item. Thanks answerers!

Have you considered using background-image?

Jared Farrish
– Jared Farrish

2012-06-24 15:14:30 +00:00
Commented Jun 24, 2012 at 15:14 — Jared Farrish
– Jared Farrish, Commented Jun 24, 2012 at 15:14

specialscope · Accepted Answer · 2012-06-24 14:59:20Z

1

Try this, for variable width and height you will need to use some javascript.

.addmenu-item {
margin-top:25px;
float:left;
overflow:auto;
background: #F4F4F4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
-moz-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
-o-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
}

answered Jun 24, 2012 at 14:59

specialscope

4,2383 gold badges26 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rnk Over a year ago

Please check this now! jsfiddle.net/Dkh4q/23 How can I make that item inside the master <div class="set addbox"> and Why do I need to use javascript here?

specialscope Over a year ago

add overflow:auto; to the .addbox class and you should be done.

Jesús Quintana · Accepted Answer · 2012-06-24 15:12:46Z

1

Hi you have a extra { in this element:

.addmenu-item {
width: 190px;
height: 190px;
background: #F4F4F4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
-moz-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
-o-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
}
} <--------

Delete this and must be work.

answered Jun 24, 2012 at 15:12

Jesús Quintana

1,81313 silver badges18 bronze badges

Comments

Simon Hughes · Accepted Answer · 2012-06-24 16:03:32Z

0

Not sure if you are using a plugin or something jQuery related but hopefully the below will help.

<style type="text/css">
    .container{
         border: 1px solid #CCC;
         border-radius: 8px;
         height: 190px;
         width: 190px;
         float: left;
     }
    .container .image{
         height: 160px;
         width: 190px;
         overflow: hidden;
     }
    .container .caption{
         font-weight: bold;
         color: #666;
         background-color: #CCC;
         height: 14px; /* height 30px; */
         padding: 8px 6px;
     }
     .shadow{
         box-shadow: 4px 4px 10px #AAA; /* adds a nice little shadow */
     }
</style>

<div class="container shadow">
    <div class="image"><img src="..."/></div>
    <div class="caption">Text goes here</div>
</div>

edited Jun 24, 2012 at 16:03

answered Jun 24, 2012 at 15:04

Simon Hughes

1155 bronze badges

1 Comment

rnk Over a year ago

I know that method of explicitly mentioning the image width and height. But I want to use overflow to make the image appear good. Please check the zerply link I've shown in the question.

rvr_jon · Accepted Answer · 2013-05-13 01:20:07Z

0

Another option is to use pure CSS and make the background-image of the container the desired image, and set the background-size property to 'cover':

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

answered May 13, 2013 at 1:20

rvr_jon

2092 silver badges8 bronze badges

2 Comments

rvr_jon Over a year ago

Not sure why this was downvoted; it's not a full answer to the question with code, but it's a valid option in this situation, and it requires no javascript or jQuery

AxelTheGerman Over a year ago

works fine for me. but I need to use the fadeIn/fadeOut and that apparently doesn't work for the background image :(

Collectives™ on Stack Overflow

CSS - image overflow tricks

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related