2015-10-28 2 views
2

Я знаю, что этот вопрос задан раньше, но я пробовал другие варианты, и он не работал правильно.маленькое изображение на большом изображении hover css

То, что я хочу сделать, это положить .png изображение над заполнителей без placeholder переключаясь или удалены, чтобы показать .png, я не совсем уверен, что я даже мой HTML правильно настроен для этого типа эффекта.

<ul class="portfolio-images"> 
    <li class="box-one"><a href="#"><img src="http://placehold.it/350x330"></li></a> 
    <li class="box-two"><a href="#"><img src="http://placehold.it/350x330"></li></a> 
    <li class="box-three"><a href="#"><img src="http://placehold.it/350x330"></li></a> 
</ul> 
+0

Где находится ваш png? – makshh

+0

Могу ли я задать специфику? Добавляете ли вы новые изображения после загрузки страницы через Javascript или что-то в этом роде? –

+0

Я пытался поместить мой .png через css, например, как вы могли бы навести спрайт с спрайтом. Я действительно рассматривал возможность ввода через java, но у меня возникли проблемы с поиском чего-либо, что дало мне представление, как это сделать. –

ответ

1

Если вы хотите добавить файл png, чтобы скрыть свое изображение заполнителя, то этот метод выполнит эту работу. Добавляя псевдоним элемента :before к списку a в списке портфолио.

http://liveweave.com/lx2OAr

Метод довольно прост. Элемент :before будет обертывать весь контент со 100% width и height. И transition добавит некоторого эффекта затухания и исчезнет эффект элемента.

Надеюсь, это поможет!

+0

Я не пытался скрывать местозаполнитель, просто имел .png поверх и все еще мог видеть заполнитель. –

+0

Я думаю, мне придется попросить ваши полные коды. Поскольку вы только дали мне список изображений с заполнителем, это лучшее, что я могу вам помочь. Или, может быть, вы можете привести любой пример с другого сайта? Постараюсь изо всех сил помочь. – sandalkoyak

+0

Вам нужен полный html, css или просто код, относящийся к области, которую я хочу редактировать? –

Смежные вопросы