zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bild vergrößern, wenn Maus darüber fährt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.12.2013, 14:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.12.2013
Beiträge: 3
-Alexander- befindet sich auf einem aufstrebenden Ast
Standard Bild vergrößern, wenn Maus darüber fährt

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 23.12.2013, 15:11
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.138
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.12.2013, 15:17
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Google mal nach css tooltip.

Edit: Oder wie Manfred62 es gezeigt hat.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #4 (permalink)  
Alt 23.12.2013, 15:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.12.2013
Beiträge: 3
-Alexander- befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
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>
Mit Zitat antworten
  #5 (permalink)  
Alt 23.12.2013, 15:54
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.138
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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

zum Fehler: was fällt dir hier auf..?
#inhalt
id="Inhalt"
Mit Zitat antworten
  #6 (permalink)  
Alt 23.12.2013, 16:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 23.12.2013
Beiträge: 3
-Alexander- befindet sich auf einem aufstrebenden Ast
Standard

Mhh habs geändert, löst das Problem jedoch nicht.
Mit Zitat antworten
  #7 (permalink)  
Alt 23.12.2013, 16:20
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.138
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von -Alexander- Beitrag anzeigen
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>
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:19 Uhr.