"Magnify an image" in mein Template einbauen aber wie****

#1
Hallo ich Grüße euch,

Mein erster Beitrag in diesem Forum hier gleich als Frage zu CSS


ich bin CSS Neuling mit Dreamwaver.

Und möchte dieses Magnify an image in mein Template einbauen.

Ungefähr so etwas-> http://www.cssplay.co.uk/menu/magnify.html

Wie gehe ich da vor? Leeres DIV und den Code vom Quelltext einfügen reicht?

Habs bis jetzt nicht geschafft und finde irgendwie keinen Ausweg, kann mir jemand helfen :(


Gruß Julian
 

SpiceLab

ZENmechanic
Premium-User
#2
Um dir überhaupt weiterhelfen zu können, solltest du schon erläutern, was daran nicht funktioniert, diesen HTML- u. CSS-Code aus dem Beispiel zu übernehmen.

HTML:
<a class="p1" href="#v"><img src="enlarge/pic1t.jpg" alt="" /><b><img class="large" src="enlarge/pic1.jpg" alt="" /></b></a>
<a class="p1" href="#v"><img src="enlarge/pic2t.jpg" alt="" /><b><img class="large" src="enlarge/pic2.jpg" alt="" /></b></a>
<a class="p1" href="#v"><img src="enlarge/pic3t.jpg" alt="" /><b><img class="large" src="enlarge/pic3.jpg" alt="" /></b></a>
CSS:
a.p1 {display:block; width:75px; height:75px; text-decoration:none; background:#fff; border:0; margin:20px 0 0 100px; float:left;}
a.p1 img {display:block; border:0;}
a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000; position:relative; z-index:500;}
a.p1 b {display:block; position:absolute; left:-9999px; padding:10px; opacity:0;

-o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);

-o-border-radius: 8px;
-icab-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

 -webkit-transition: opacity 0.6s ease-in-out;

}


a.p1:hover b {top:-65px; left:110px; padding:10px; border:1px solid #aaa; background:#fff; opacity:1.0;

}
Ebenso wäre die Vorstellung des HTML- u. CSS-Quellcodes deiner Seitenvorlage von Interesse, um auch die Zusammenhänge des Problems nachvollziehen zu können.
 
Zuletzt bearbeitet:
#3
Hallo GOA, danke für deine Antwort

Es geht darum das ich keine Ahnung habe wie ich da am besten vorgehe :(


sollten beim drüberfahren groß werden, aber erstelle ich da eine klasse oder reicht der code?


Ich glaube ich muss unbedingt das V2B nochmal durchmachen, oder Little Boxes :p
 
Zuletzt bearbeitet:

SpiceLab

ZENmechanic
Premium-User
#6
Dann hättest du deine Frage mal besser direkt im benachbarten Forum für HTML-Editoren gestellt.

Nicht jeder, der sich mit CSS beschäftigt, respektive darin auskennt, weiß, was in Dreamweaver so geboten ist.

Ich weiß es nicht ;)

//edit: Hab es mal dem Team gemeldet, den Beitrag zu verschieben ;)
 
Zuletzt bearbeitet: