css outer div for product box [closed] - css

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Could anyone help me by describing how etc. I do to makes for a function as illustrated.
What I want is that when I mouse over a product box (have not fixed height),
I want to get a box with the buy button, etc. that looks like the picture.
Know that I do not put up the code or, but I do not know where to begin.
So if anyone has any tips or so, I'd be grateful!

Answer 1

Try
button {
display: none;
}
li:hover > button {
display: block;
}
<ul>
<li>Description 1<button>Buy</button></li>
<li>Description 2<button>Buy</button></li>
</ul>
The idea here is to use the > operator to tell CSS to change something in our target. The target being the Buy button inside the li tag.
http://jsfiddle.net/beautifulcoder/kj2XA/

Answer 2

1) First of all: make your items fixed size. This prevents later issues (in layout) and allows you to create effect you described. Like:
HTML (not complete):
<div class="item-wrapper">
<div class="item-content">
<!-- item images etc here -->
</div>
<div class="item-actions">
<button class="buy">Buy</button>
</div>
</div>
CSS:
.item-wrapper {
width: 200px;
overflow: visible;
float: left;
background: #999999;
margin: 5px;
position: relative;
border: 2px solid #fff; /* without this you have unwanted size effects on hover*/
}
.item-content {
width: 200px;
height: 300px;
}
.item-actions {
display: none;
position: absolute;
background: #888;
top:300px;
z-index: 10;
left: 0px;
width: 200px;
height: 100px;
}
2) create javascript with jquery for your items like:
$('.item-wrapper').hover(function () {
// Change css on hover .. this could be done also by changing class
$(this).css({'border':'2px solid #880088'});
$(this).find(".item-actions").slideDown("fast");
}, function(){
$(this).css({'border':'2px solid #fff'});
$(this).find(".item-actions").slideUp("fast");
});
Here is fiddle: http://jsfiddle.net/h23mY/
This is also nice effect: http://jsfiddle.net/ww53e/

Answer 3

lets say the item is enclosed by div tag, now use css hover on
<script>
//on document load item1-buy.hide(); dont forget to use jquery
</script>
<div id="item1">
//item goes here.
<input type="submit" id="item1-buy" value="Buy">
</div>
css:
#item1:hover {
//here you can style how ever you want. Add orange border and so on...
}
now on hover unhide the buy button using jquery #item1-buy.show();

Answer 4

Check the DEMO
I've made a simple markup to show you the idea:
<div class="item">
<img src="http://lorempixel.com/200/200/" alt="" />
<span>15$</span>
<div class="buy">BUY</div>
</div>
And the CSS:
.item {
float: left;
padding: 10px;
border: 1px solid #ccc;
margin: 10px 10px 0 0;
}
span{
display: block;
}
.buy {
padding: 5px;
background: green;
display: none;
}
.item:hover {
border: 1px solid yellow;
}
.item:hover .buy {
display: inline-block;
}
Update: still an issue with the last image in a row, but hope it helps: DEMO 2
<div class="item">
<img src="http://lorempixel.com/200/200/" alt="" />
<span>15$</span>
<div class="buy">
<span class="button">BUY</span>
</div>
</div>