S1egh4rdt
@S1egh4rdt
Вот я тип

Как заставить img позиционироваться нужным мне образом?

Задача такова: есть див, в нем лежат 2 изображения - одно основное, другое должно будет на него накладываться в нужном месте. 2е изображение должно быть скрыто до того момента пока на него не будет на веден курсор (свойство opacity). После этого необходимо реализовать резиновую верстку всего этого. То есть координаты 2 изображения относительно 1го будет задано в %.
1 вопрос: есть ли библиотека на JS или JQuery для более легкой реализации (менше мороки с расчетами координат и переводом их в проценты, наведением курсора и т.п.) всего этого?
2 вопрос: начал пока сам делать. Вроде все верно, но у меня мое 2е img считает своим родителем окно а не тот div, в котором он находится.
<div class="row Einzug" style="position: relative;">
	<img src="image/headart.jpg" class="headart">
	<img src="image/catalog.jpg" id="linkimg1">
</div>

.headart{
  width: 100%;
  position: relative;
}

#linkimg1{
  position: absolute;
  bottom: 20.8888888889%;
  left: 21.657754%;
}
  • Вопрос задан
  • 1110 просмотров
Решения вопроса 1
Arios
@Arios
Если я правильно понял, то вам нужно div'у задать фоновое изображение 1-ым изображением, а второе маштабируйте по блоку и при ховере делаете его display: block, либо opacity: 1;

2 вопрос: С чего вы так решили? Поставьте второму изображению position: absolute;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы