Problem mit CSS - Verschiebung & Hover

    1. Frage

    So sieht es normal aus.

    1. Frage

    1. Frage

    1. Frage

    1. Frage
    und so wenn man ranzoomt.

    1. Frage

    1. Frage

    1. Frage

    PHP
    <div class="wrapper">			<div class="infotext">				<br>				<span style="color: #f6f6f6">				<h4>Überschrift</h4>				<br>				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 				ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 	duo				dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut lab				ore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et e				a rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 				</span>			</div>			<div class="news">				<?php 				?>				<div class="newstext">				</div>			</div>		</div>

    1. Frage

    PHP
    .wrapper { 	background-color: #272727;	width: 1091px;	height: 347px;	margin-top: 20%;	margin-left: 21.9%;}.infotext { 	margin-left: 3%;	max-width: 50%;}.news { 	background-color: #2f2f2f;	width: 230px; 	height: 300px;	margin-left: 75%;	margin-top: -18%;}.newstext { }

    1. Frage

    1. Frage
    Wie genau verändere ich das?

    1. Frage

    1. Frage


    2. Frage

    2. Frage

    PHP
    .server:hover { 	background-image: url(../images/server_hover.png);	z-index: 110;}

    2. Frage

    PHP
    .server { 	position: relative; 	z-index: 100;	margin-top: -170px;	margin-left: 415px;	padding: 10px 0px 10px 0px;	float: left;	width: 33%;}

    2. Frage

    PHP
    .screenshots { 	margin-top: 10px;}.screenshots img { 	max-width: 100%;	max-height: 100%;	height: auto;	width: auto;}

    2. Frage

    PHP
    <div class="server"><a href=""><img src="images/server.png"></a></div>

    2. Frage

    2. Frage
    Was ist hier das Problem, ich komm da nicht ganz hinter X(

    Eine Frage?
    Du willst das <img> per Hover ändern?
    Das geht nur mit Javascript..
    Du setzt einfach nur ein Hintergrundbild, wärend der img-Tag weiterhin das selbe Bild anzeigt...
    Was willst du damit bezwecken?
    Könntest du dein Problem auch mal erklären?
    bzw. mal deine "Frage" auch mal stellen...


    Und dann könntest du [ css ] und [ html ] benutzen

    Zitat von Jeffry

    Hauptsache ist ja immer, dass du es verstehst und das es funktioniert. Es bringt nichts, wenn du einen Code hast den du nicht verstehst, und noch weniger bringt es was wenn du einen Code hast der nicht tut. Naja, und wenn beides zusammen kommt, dann wirds lustig.

    Diverse:


    Das ganze soll (logischerweise) ein Hover darstellen.
    Sobald ich also über den Server Bereich fahre, verändert sich das Bild.
    (Ich probiere es gleich mal mit JS aus, danke)


    Was mir noch wichtig währe ist der Wrapper, bzw. wieso er beim zoomen mit nach oben links gezogen wird.

    Du musst das anders machen...
    Du musst es (wenn du es nicht mit js machen willst) so machen:
    Du musst nicht im html das <img> machen... mach ein Div mit dem Bild als Background-Image...
    Dann geht deine Idee auch auf...
    Sonst geht es leider nicht, weil <img> und Background-image zwei absolut verschiedene Sachen sind...

    Zitat von Jeffry

    Hauptsache ist ja immer, dass du es verstehst und das es funktioniert. Es bringt nichts, wenn du einen Code hast den du nicht verstehst, und noch weniger bringt es was wenn du einen Code hast der nicht tut. Naja, und wenn beides zusammen kommt, dann wirds lustig.

    Gefällt mir 1
    JavaScript
    function toggle(server){
	var elem = document.getElementById(server);

	if(elem.style.backgroundimage == "Bild1.jpg"){
		elem.style.backgroundimage = "Bild2.jpg";
	}
        else{
		elem.style.backgroundimage = "Bild1.jpg";
	}
}


    HTML
    <div id="server" onmouseover="toggle('server')" style="background-image: url('Bild1.jpg');"></div>
    Zitat von Jeffry

    Hauptsache ist ja immer, dass du es verstehst und das es funktioniert. Es bringt nichts, wenn du einen Code hast den du nicht verstehst, und noch weniger bringt es was wenn du einen Code hast der nicht tut. Naja, und wenn beides zusammen kommt, dann wirds lustig.

    • Offizieller Beitrag
    Zitat von Diverse

    Sonst geht es leider nicht, weil <img> und Background-image zwei absolut verschiedene Sachen sind...

    Was redest du denn bitte?
    Auf einen IMG Tag kannst du genau so gut background-image benutzen.


    Einen Hover Effekt bekommst du also so hin:
    <style type="text/css">


    .deineklasse {
    background: url(url);


    }



    .deineklasse:hover {
    background: url(neue url);


    }
    </style>
    <img class="deineklasse"/>



    Dann noch transition etc und es sieht gut aus.

    • Offizieller Beitrag

    Klar, pass deinen Code an..
    Entferne entweder die img und mach das
    über ein Div oder
    behalte die img und mach es wie oben, ist letzten Endes gleich.


    Edit:


    .server {
    background-image: url(../images/server.png);
    position: relative;
    z-index: 100;
    margin-top: -170px;
    margin-left: 415px;
    padding: 10px 0px 10px 0px;
    float: left;
    width: 33%;
    }


    .server:hover {
    background-image: url(../images/server_hover.png);
    position: relative;
    z-index: 100;
    margin-top: -170px;
    margin-left: 415px;
    padding: 10px 0px 10px 0px;
    float: left;
    width: 33%;
    }