✔ Frage zu angewandtem Effekt....

tobm_knows_best · 16. Dezember 2011

Hallo zusammen,

ich würde gerne auf meiner eigenen HP solch einen Effekt (siehe die Bilder auf der Seitenmitte beim *rollover*...) auf http://www.sarahbraun.net auf entsprechende Bilder anwenden. Kann mir jemand sagen wie genau ich so etwas realisieren kann?

jQuery - oder Flash?....

wäre super wenn mir diesbezüglich jemand ein paar Informationen geben könnte!

Vielen Dank schon einmal im Voraus

CPoly · 16. Dezember 2011

http://jsfiddle.net/CmAjQ/

tobm_knows_best · 16. Dezember 2011

äh....gut - und wie genau darf ich das jetzt *handhaben*?
Ich vermute ich werde den HTML-Code und den CSS-Code dementsprechend in die Datein einfügen müssen.... wie verfahre ich dann mit Javascript etc... ?!

Bin auf dem Gebiet nämlich ein absoluter **** :/...

Mich würde auch interessieren ob das der einzige Effekt ist, den man damit (die gepostete Seite von dir betreffend) erstellen kann, oder welche Variationen noch machbar sind... ?!

Hoffe das war nicht zuviel auf einmal :/

Merci

CPoly · 16. Dezember 2011

tobm_knows_best hat gesagt.:
Bin auf dem Gebiet nämlich ein absoluter **** :/...

Das ist natürlich eine wichtige Info.

tobm_knows_best hat gesagt.:
Mich würde auch interessieren ob das der einzige Effekt ist, den man damit (die gepostete Seite von dir betreffend) erstellen kann, oder welche Variationen noch machbar sind... ?!

Was stellst du dir denn für einen Effekt vor? Das war nur jetzt nur der ungefähre Nachbau des von dir verlinkten Effekts.

Ich habe das mal in eine HTML Datei gepackt, dann siehst du auch, wo das JavaScript hin gehört.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

	<title>Effekt</title>

	<style type="text/css">
	/* <![CDATA[ */
	.image-wrapper {
		border:1px solid #000;
		position:relative;
		width:285px;
		height:160px;
		overflow:hidden;
	}

	.image-wrapper > img {
		display:block;
	}

	.image-wrapper > .image-details {
		position:absolute;
		left:0px;
		right:0px;
		bottom:0px;
		height:50px;
		line-height:50px;
		background:#000;
		color:#fff;
		opacity:.7;
	}
	/* ]]> */
	</style>
</head>

<body>
	<div class="image-wrapper">
		<img src="http://www.sarahbraun.net/images/index/print.jpg" alt="" />
		<p class="image-details">
			Foobar
		</p>
	</div>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	$(function() {
		$('.image-details').css('bottom', '-45px').parent().hover(function() {
			$(this).find('.image-details').animate({'bottom': '0px'}, 'fast');
		}, function() {
			$(this).find('.image-details').animate({'bottom': '-45px'}, 'fast');
		});
	});
	/* ]]> */
	</script>
</body>

</html>

tobm_knows_best · 16. Dezember 2011

Merci....

...dann werde ich das mal heute nach Arbeit daheim gleich mal ausprobieren...
und natürlich entsprechend Feedback geben...

tobm_knows_best · 17. Dezember 2011

Hmmmm...also im Großen und Ganzen funktioniert´s ja wunderbar, aber irgendwie ist die grau Leiste die dann *hochfährt* leider ein klein wenig zu schmal und schliesst auch nicht richtig mit dem Bildende unten ab... hier: http://jsfiddle.net/CmAjQ/24/ passt´s komischerweise...

Sobald ich aber dann das ganze in den Quelltext mit einbaue, dann ist´s verschoben. Woran könnte das denn liegen...?

Hier mal der Quelltext - vielleicht habe ich ja was übersehen ?!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>Effekt</title>

<style type="text/css">
/* <![CDATA[ */
.image-wrapper {
border:3px solid #EEE;
position:relative;
width:305px;
height:150px;
overflow:hidden;
}

.image-wrapper > img {
display:block;
}

.image-wrapper > .image-details {
position:absolute;
left:0px;
right:0px;
bottom:0px;
height:50px;
line-height:50px;
background:#000;
color:#fff;
opacity:.7;
}
/* ]]> */
</style>
</head>

<body>
<div class="image-wrapper">
<img src="http://www.bilderkiste.org/show/original/5132408221985/aktuelles_305x150px.png" alt="" />
<p class="image-details">
» <a href="#">Erfahren Sie mehr</a>
</p>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(function() {
$('.image-details').css('bottom', '-50px').parent().hover(function() {
$(this).find('.image-details').animate({'bottom': '0px'}, 'fast');
}, function() {
$(this).find('.image-details').animate({'bottom': '-50px'}, 'fast');
});
/* ]]> */
</script>
</body>

</html>

Vielen Dank schonmal im Voraus für die Mühen :/...

CPoly · 17. Dezember 2011

Benutze bitte in Zukunft zum Einbinden von Code die entsprechenden Tags.
Mindestens
[code]Dein Code[/code]
oder in dem Fall
[code=html]Dein Code[/code].

Ich gucke es mir gleich an.

Edit: Das p-Element hat je nach Browser diverse standard Styles. Unter anderem "margin". jsfiddle benutzt ein reset-css http://jsfiddle.net/css/normalize.css.
Es reicht wenn du explizit margin auf 0 setzt.

CSS:

.image-wrapper > .image-details {
    /*HIER*/
    margin:0;
    /*HIER*/

	position:absolute;
	left:0px;
	right:0px;
	bottom:0px;
	height:50px;
	line-height:50px;
	background:#000;
	color:#fff;
	opacity:.7;
}

tobm_knows_best · 17. Dezember 2011

Herrgott nochmal ******

Jetzt friemel ich da wieder rum und mein Browser zeigt´s immer noch nicht wie gewünscht an...egal wie ich´s ändere... Egal welche Werte - nun bewegt sich der schwarze Layer keinen Millimeter mehr

... Aber die Position ist schon mal die richtige

--> Großes DANKE******

Der Layer soll beim Herüberfahren aus den *Nichts* von unten nach oben (ca. 50px hoch) gehen. Und beim Herausfahren der Maus wieder nach unten verschwinden...

Tut mir leid, aber irgendwas hab ich wohl übersehen - bzw. mir fehlen leider die ein oder anderen Basics

Hir nochmal der Code mit Bitte um *Nachsicht*

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

	<title>Effekt</title>

	<style type="text/css">
	/* <![CDATA[ */
	.image-wrapper {
    border:3px solid #EEE;
    position:relative;
    width:305px;
    height:150px;
    overflow:hidden;
}

.image-wrapper > img {
	    display:block;
}

.image-wrapper > .image-details {
	margin:0;
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    height:50px;
    line-height:50px;
    background:#000;
    color:#fff;
    opacity:.7;
}
	/* ]]> */
	</style>
</head>

<body>
	<div class="image-wrapper">
    <img src="http://www.bilderkiste.org/show/original/5132408221985/aktuelles_305x150px.png" alt="" />
    <p class="image-details">
        » <a href="#">Erfahren Sie mehr</a>
    </p>
</div>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
	$(function() {
		$('.image-details').css('bottom', '50px').parent().hover(function() {
			    $(this).find('.image-details').animate({'bottom': '-50px'}, 'fast');
}, function() {
    $(this).find('.image-details').animate({'bottom': '50px'}, 'fast');
});
	/* ]]> */
	</script>
</body>

</html>

CPoly · 17. Dezember 2011

In deinem JavaScript Code waren Syntaxfehler. Da fehlte eine Zeile.

Javascript:

$(function() {
	$('.image-details').css('bottom', '50px').parent().hover(function() {
		$(this).find('.image-details').animate({'bottom': '-50px'}, 'fast');
	}, function() {
		$(this).find('.image-details').animate({'bottom': '50px'}, 'fast');
	});
});

Und du scheinst die Werte verändert zu haben. So müsste es passen, wie du es dir vorstellst.

Javascript:

$(function() {
	$('.image-details').css('bottom', '-50px').parent().hover(function() {
		$(this).find('.image-details').animate({'bottom': '50px'}, 'fast');
	}, function() {
		$(this).find('.image-details').animate({'bottom': '-50px'}, 'fast');
	});
});

tobm_knows_best · 17. Dezember 2011

CPoly hat gesagt.:
Und du scheinst die Werte verändert zu haben. So müsste es passen, wie du es dir vorstellst.

Javascript:

$(function() { $('.image-details').css('bottom', '-50px').parent().hover(function() { $(this).find('.image-details').animate({'bottom': '50px'}, 'fast'); }, function() { $(this).find('.image-details').animate({'bottom': '-50px'}, 'fast'); }); });

Ja - die hab ich bewusst so geändert

Vielleicht haben wir auch ein wenig aneinander vorbeigeredet... :/

Hir mein Code nochmal - dann siehst du wie ich´s mir vorgestellt habe - DENN JETZT PASST´S****** JUHUUUU******

HTML:

$(function() {
    $('.image-details').css('bottom', '-50px').parent().hover(function() {
        $(this).find('.image-details').animate({'bottom': '0px'}, 'fast');
    }, function() {
        $(this).find('.image-details').animate({'bottom': '-50px'}, 'fast');
    });
});

So und nun noch eine letzte Frage - ich will nicht gleich dreist rüberkommen...

Aber wie bekomme ich hinter dem Bild nun noch einen schwarzen *Schein nach aussen* hin? Ich weiss das es irgendwie machbar ist... und verdammt nochmal woher weisst du das eigentlich alles... ?!

MFG - und vielen vielen Dank nocheinmal...******
Tobm

✔ Frage zu angewandtem Effekt....

tobm_knows_best

Erfahrenes Mitglied

CPoly

Mitglied Weizenbier

tobm_knows_best

Erfahrenes Mitglied

CPoly

Mitglied Weizenbier

tobm_knows_best

Erfahrenes Mitglied

tobm_knows_best

Erfahrenes Mitglied

CPoly

Mitglied Weizenbier

tobm_knows_best

Erfahrenes Mitglied

CPoly

Mitglied Weizenbier

tobm_knows_best

Erfahrenes Mitglied

Neue Beiträge