Проблемы с изображением + опрокидывание Постепенное когда парящий

Question

attached: screenshot

Привет всем, так что у меня возникают некоторые трудности с получением эффекта изображения + опрокидывание работать. (Я новичок в кодировании) То, что я пытаюсь сделать:

Я хочу, чтобы изображение было помещено в поле «hover» (показано с непрозрачностью), которое имеет высоту и ширину 100%. Предполагается, что изображение должно быть 280px x 280px, но оно больше, чем это, а также чередуется или повторяется внутри выделенного пространства? Может ли кто-нибудь увидеть, что я могу делать неправильно?

PS - Есть 2 других «показанных работ», которые будут отображаться рядом с тем, который вы видите выше, и будут в том же формате, что и первый ... следовательно, повторяющиеся абзацы и изображения ниже. Эти изображения должны действовать как целая ссылка, когда они зависнут, но пока это действие, похоже, применимо только к тексту: Vital Voices | Кампания ... (см. Скриншот)

Меня больше беспокоят изображения, совпадающие с наведением/наложением.

Вот CSS:

img { 
margin-top: 5px; 
padding: 10px; 
float: left;  
} 

.picture { 
width: 280px; 
height: 280px; 
background: url(".png"); 
padding: 20px; 
float: left; 
} 


.overlay { 
width: 100%; 
height: 100%; 
background: url("../images/opacity.png"); 
display: none; 
padding: 10px; 
text-align: center; 
font-weight: bold; 
font-family: Baskerville; 
font-size: 20px; 
} 

.picture:hover .overlay { 
display: block; 
} 

.clearfloat { 
clear: both;  
} 

Вот HTML:

<div id="wrapper"> 

<h1>Featured Works</h1> 

<p><a href="branding.html" src="images/VV_2.png"><div class="picture" style="width: 280px; height: 280px; background: url('images/VV_2.png');"><div class="overlay">Vital Voices | Campaign</div></div></a></p> 

<p><a href="typography.html" src=""><div class="picture" style="width: 280px; height: 280px; background: url('#');"><div class="overlay">Quote Poster | Typography</div></div></a></p> 

<p><a href="marketing.html" src=""><div class="picture" style="width: 280px; height: 280px; background: url('#');"><div class="overlay">Coffee | Marketing</div></div></a></p> 

<div class="clearfloat"></div> 

</div> <!--closes wrapper div--> 

----------------- обновление:

<p><a href="branding.html"><img src="images/VV_2.png" width="280px" height="280px" alt="vital voices preview image" class="preview"></a></p><div class="overlay">Vital Voices | Campaign</div> 

^меняем код html на что-то вроде этого ... и CSS на это: (изменено изображение для предварительного просмотра, сохраняется информация о перекрытии одинакова)

.preview { 
width: 280px; 
height: 280px; 
padding: 20px; 
float: left; 
} 

.preview:hover .overlay { 
display: block; 
} 

... зафиксировано позиционирование/размер изображения, но теперь наложение не вступает в силу. см: screenshot2

attached: screenshot2

Answer 1

Фоновое изображение будет повторяться по умолчанию, если изображение меньше доступного места. Чтобы изменить это, вы можете использовать свойство background-repeat и установить его на no-repeat. Затем фон начнется в верхнем левом углу, не повторяясь. Чтобы получить фон в центре, вам нужно будет использовать свойство background-position и установить его значение center.

Я дам общий пример того, как добиться описанного эффекта:

.work a { 
 
    position: relative; 
 
    float: left; 
 
    margin-right: 20px; 
 
    width: 180px; 
 
    height: 180px; 
 
} 
 

 
.work .title { 
 
    display: none; 
 
    position: absolute; 
 
    width: 100%; 
 
    padding: 5px 0; 
 
    margin-top: 15px; 
 
    text-align: center; 
 
    background: rgba(255,255,255,0.5); 
 
} 
 

 
.work:hover .title { 
 
    display: block; 
 
}

<h1>Featured Works</h1> 
 

 
<div class="work"> 
 
    <a href="#"> 
 
    <span class="title">Vital Voices | Campaign</span> 
 
    <img src="http://lorempixel.com/180/180/abstract/3/"> 
 
    </a> 
 
</div> 
 

 
<div class="work"> 
 
    <a href="#"> 
 
    <span class="title">Quote Poster | Typography</span> 
 
    <img src="http://lorempixel.com/180/180/abstract/4/"> 
 
    </a> 
 
</div>

Небольшой совет: избегать использования встроенного CSS (= CSS в style свойство вашего HTML) если это не требуется. Это позволит вам улучшить ремонтопригодность. Не стесняйтесь спрашивать, что-то неясно.