Изображение върху изображението.

ReD_z0n3

Registered
Как ще стане върху едно изображение , като го посоча с мишката на него да излиза друго по малко изображение.

Ето такова нещо .

3054793K.jpg


И точно това , което искам.

3054786u.jpg
 
Задаваш на главната картинка position: relative; и после с position: absolute наместваш по-малкото изображение.
В началото може да е скрито, и при ховър да го показваш.
 
Значи гледай сега, става с hover, но не може да се добави по-малката снимка трябва си да си е нова снимка т.е. имаш една снимка минаваш с мишката не се добавя друга върху тази ами трябва да има съвсем нова

ето ти един пример с едно меню
HTML:
<html>
	<head>
		<title>Title</title>
		<style>
			.menu 
			{
				background-color: red;
				width: 500px;
				height: 44px;
				text-align:center;
			}
			.menu a
			{
				background-color:  green;
				color: #fff;
				padding: 12px 30px;
				float: left;
				outline: none;
			}
			.menu-text
			{
				margin-left: 80px;
			}
			.menu a:hover
			{
				background-color: blue;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="menu">
			<div class="menu-text">
				<a href='#'>пример</a>
				<a href='#'>пример</a>
				<a href='#'>пример</a>
			</div>
		</div>
	</body>
</html>

класа menu a няма да ти трябва за снимката, ами ще трябва да го направиш menu img и да си добавиш настройките на картинката

също и menu-text няма да ти трябва, направих го за да изпратя текста в центъра на главния клас

а там при menu.a:hover, там ще трябва да го направиш menu.img: hover, и дам да сложиш картинката

та на бързо сега
menu си опрявяш настройките на главния див, дали ще има фон и т.н.т

menu.a, това а идва от <a href... за линк значи ти по тая логика от <img src, ще напишеш menu.img

menu.a: hover това е на линка когато е преминат през него с мишката, по тая логика ще си го направим menu.img: hover
 
Replace каза:
Задаваш на главната картинка position: relative; и после с position: absolute наместваш по-малкото изображение.
В началото може да е скрито, и при ховър да го показваш.

До , колкото разбирам този код ще трябва да го сложа там , където изкарва изображението със ъплоаднатия файл ?!
 
ReD_z0n3 каза:
Replace каза:
Задаваш на главната картинка position: relative; и после с position: absolute наместваш по-малкото изображение.
В началото може да е скрито, и при ховър да го показваш.

До , колкото разбирам този код ще трябва да го сложа там , където изкарва изображението със ъплоаднатия файл ?!
Точно така!
 

Back
Горе