Делал по предложенному примеру всплывающую кнопку/ссылку, но есть проблема. При наведении на ul я хочу, чтобы кнопка появлялась всегда в фиксированном месте возле нижней границы ul (как на фото), сейчас же она появляется снизу под изображением, заходя на изображение.
Как нужно
Нужна помощь
.mycls ul {
display: inline-block;
position: absolute;
}
.show .mycls a {
display: block;
float: left;
text-align: center;
}
/* Обертка */
.mycls li {
overflow: hidden;
position: relative;
}
.show {
position: absolute;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
}
/* Наведение */
ul:hover .show {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
position: absolute;
}
.mycls {
width: 220px;
height: 310px;
float: left;
border: 1px solid #808080;
border-radius: 5px;
padding: 5px;
margin: 0px 10px 10px 0px;
/*margin between item*/
}
<ul class="mycls">
<li align="center">
<!-- <div>
<div>@Html.ActionLink(@Html.DisplayFor(m => item.Name.Tool).ToString(), "Item", new { id = item.ToolID }, new { @class = "div-name" })</div>
<div class="div-price">Стоимость: @item.Price.ToString("# руб").</div>
<div>
@{
var img = "";
try
{
var base64 = Convert.ToBase64String(item.ImageData);
img = string.Format("data:;base64,{0}", base64);
<img src='@img' class="img-responsive" width="220" height="300" />
}
catch (Exception ex)
{
<span class="form-control-static">Нет изображения!</span>
}
}
</div> -->
<img src="http://svarkahome.com/wp-content/uploads/2014/05/delaem-svarochnyj-apparat-postojannogo-toka-svoimi_1.jpg" class="img-responsive" width="220" height="200" />
</div>
<div class="show">
<a><input type="button" value="В корзину" class="btn btn-default btn-outline" /></a>
</div>
</li>
</ul>
.mycls li { height: 100%; }