Имеем такой код:
.pre p {
width: 301px;
height: 226px;
background: rgba(255, 255, 255, 0.7);
color: #000000;
padding: 18px 20px;
position: absolute;
top: 50.4%;
left: 50.0%;
transform: translate(-50%, -50%);
transition: all .2s ease-in-out;
opacity: 0;
font-size: 15px;
}
.pre p:hover,
img:hover + p {
opacity: 1;
}
.pre .col-md-4 > div {
position: relative;
}
<div class="pitr">
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="comf">
<img src="images/solo9.jpg">
<p>Рапапам</p>
</div>
</div>
</div>
Т.е. при наведении на картинку появляется текст на белом фоне. Как сделать так, чтобы при загрузке кода снизу картинки был текст, а при наведении появлялся мой фрагмент кода?
.pre
и элементовp
в HTML нет, то есть ваш CSS очень слабо соотносится с HTML. – Vadim Ovchinnikov 28 июл '17 в 10:18