Problem mit CSS - Verschiebung & Hover

.HellYeah · 8. Juni 2014

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

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

PStar · 8. Juni 2014

Schon mit position: absolute; probiert?

.HellYeah · 8. Juni 2014

Ja, hat leider garkeinen Effekt.

Diverse · 8. Juni 2014

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

.HellYeah · 8. Juni 2014

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.

Diverse · 8. Juni 2014

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...

.HellYeah · 8. Juni 2014

Diverse: Daran habe ich auch bereits gedacht, und es mittlerweile auch umgesetzt.
Wie sähe die Lösung mit JS eigentlich aus? (Bin JS Anfänger, deshalb interessiere ich mich dafür)

Diverse · 8. Juni 2014

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>

.HellYeah · 8. Juni 2014

Danke dir.
Hättest du noch eine Idee für das verschieben des Wrappers?

Edgar · 8. Juni 2014

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.

.HellYeah · 8. Juni 2014

Edgar:
Den Code & Screenshot hast du dir aber schon angesehen oder?

Edgar · 8. Juni 2014

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%;
}

.HellYeah · 8. Juni 2014

Edgar:

Öhm, naja.

Edgar · 8. Juni 2014

Schau dir mal das an, habe ich mal schnell geschrieben:
http://jsfiddle.net/Cireyses/W8JK7/

breadfish.de 12. März 2022