Bild vergrößern, wenn Maus darüber fährt

-Alexander- · #1 (**permalink**) 23.12.2013, 14:45

Hi,
angenommen ich habe eine Seite mit seinem Paragraphen links und einem Bild rechts daneben. Wenn man mit der Maus über das Bild fährt, soll sich das Bild nach links über den Text vergrößern. Wie mache ich das am besten?
Danke

Manfred62 · #2 (**permalink**) 23.12.2013, 15:11

ohne js z.B. so:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
		    margin: 0;
		    padding: 0;
		}
		.wrap {
			width: 600px;
			height: 150px;
			border: 1px solid #ccc;
			position: relative;
		}
		img {
			width: 150px;
			position: absolute;
			right: 0;
			top: 0;
		}
		img:hover {
			width: 350px;
			transition: width .5s linear;
		}
		p {
			width: 350px;
			padding: 10px;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, nostrum, eaque eos repudiandae excepturi iusto voluptatum obcaecati esse numquam fugit dolor eum in non! Quidem fuga nobis iusto possimus consequuntur. Quas, illum, aspernatur labore quidem sit nobis alias similique consequatur.</p>
		<img src="http://placehold.it/350x150/0eafff/ffffff.png" alt="" width="350" height="150">
	</div>
</body>
</html>

explanator · #3 (**permalink**) 23.12.2013, 15:17

Google mal nach css tooltip.

Edit: Oder wie Manfred62 es gezeigt hat.

-Alexander- · #4 (**permalink**) 23.12.2013, 15:37

Zitat:

Zitat von Manfred62

ohne js z.B. so:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
		    margin: 0;
		    padding: 0;
		}
		.wrap {
			width: 600px;
			height: 150px;
			border: 1px solid #ccc;
			position: relative;
		}
		img {
			width: 150px;
			position: absolute;
			right: 0;
			top: 0;
		}
		img:hover {
			width: 350px;
			transition: width .5s linear;
		}
		p {
			width: 350px;
			padding: 10px;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, nostrum, eaque eos repudiandae excepturi iusto voluptatum obcaecati esse numquam fugit dolor eum in non! Quidem fuga nobis iusto possimus consequuntur. Quas, illum, aspernatur labore quidem sit nobis alias similique consequatur.</p>
		<img src="http://placehold.it/350x150/0eafff/ffffff.png" alt="" width="350" height="150">
	</div>
</body>
</html>

Danke für die Antwort. Irgentetwas klappt bei mir noch nicht so ganz, da das Bild bei mir neben der div angezeigt wird.

Hier mal der Code:

HTML-Code:

<html>
<head>
<title></title>
<style type="text/css">
body{
background: lightgrey;
text-align: center;
}
#inhalt{
float: left;
background: white;
width: 800px;
position:relative;
}
#home1{
margin-top: 10px;
float: left;
background: white;
width: 800px;
color: black;
font-family: verdana;
text-align: left;
font-size: 20px;
font-weight: bold;
margin-bottom: 30px;
}


#home2{
float:left;
background: white;
width: 400px;
color: black;
font-family: verdana;
text-align: left;
font-size: 14px;
margin-bottom: 30px;
}

#home3{

margin-left: 30px;
margin-bottom: 30px;
position:absolute;
width: 320px;
height: 240px;
}

#home3:hover{
position: absolute; 
width: 480px;
height: 360px;
transition: 2s;
}
</style>
</head>
<body>
		<div id="Inhalt">
			<p id="home1">Überschrift</p>
			<p id="home2">Text</p>
			<img src="bild_home.jpg" height="240" width="320 "id="home3">
		</div>
</div>


</div>
</body>
</html>

Manfred62 · #5 (**permalink**) 23.12.2013, 15:54

denke du solltest erst mal die Basics machen?
Tipp: Little Boxes

zum Fehler: was fällt dir hier auf..?
#inhalt
id="Inhalt"

-Alexander- · #6 (**permalink**) 23.12.2013, 16:04

Mhh habs geändert, löst das Problem jedoch nicht.

Manfred62 · #7 (**permalink**) 23.12.2013, 16:20

Zitat:

Zitat von -Alexander-

Mhh habs geändert, löst das Problem jedoch nicht.

sehe nichts? Stell das mal online (z.B. Freehoster).
Keine Ahnung, was genau du vor hast. Hier noch mal eine reduzierte Version.

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}

	body{
		background: #ccc;
		font-family: verdana, sans-serif;
		font-size: 14px;
	}

	#inhalt {
		background: #fff;
		width: 800px;
		height: 550px;
		position:relative;
	}

	h1 {
		font-size: 20px;
		padding: 10px 30px 30px;
	}

	p {
		width: 400px;
		padding: 0 30px 30px;
	}

	img {
		position:absolute;
		bottom: 30px;
		left: 30px;
		width: 320px;
		height: 240px;
	}

	img:hover{
		width: 480px;
		height: 360px;
		transition: 2s;
	}
	</style>
</head>
<body>
	<div id="inhalt">
		<h1>Überschrift</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, maiores, ea quibusdam omnis harum suscipit debitis eaque error obcaecati ullam reprehenderit vero dolores molestiae iste assumenda modi architecto? Consectetur, tempore, suscipit quidem deserunt sit consequuntur atque dolores labore voluptas sapiente explicabo dignissimos perspiciatis inventore repudiandae beatae velit recusandae quod qui.</p>
		<img src="http://placehold.it/320x240/0eafff/ffffff.png" height="240" width="320">
	</div>
</body>
</html>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Onmouseover-Effekt - Wenn Maus auf Bild1 soll Bild 2 zu Bild 3 wechseln.	Andreas91	Grafik, Design, Typografie	1	06.09.2011 22:41
Mouseover -wie kann ich ein Bild verändern wenn ich mit der Maus über ein Wort fahre?	hrhr87	(X)HTML	3	16.03.2010 10:47
Bild vergrößern - Tooltip - Probleme IE	celine70	CSS	0	12.02.2009 09:30
Bild oder div nach oben vergrößern	IceReaper	CSS	9	03.08.2007 13:18
Bild auf klick vergrössern	Crescent	(X)HTML	2	02.10.2005 15:27