Erledigt - Hover:Bild vergrößern Fehler + Überschrift

CreativeMind · 07.02.2015

Hallo zusammen,
Ich habe auf meinem Websiten-Prototypen zwei Bilder mit einem hover stellt, welches dann die Bilder vergrößert. Klappt auch gut, solang das Browserfenster auf einer Breite von 1920px bleibt, wird es kleiner, dann bildet sich ein weißer Abstand, über welchen die Bilder dann auch gehen.
Mein zweites Problem ist, dass ich gerne ein div mit Text über den Bildern haben möchte, welcher nicht von dem hover beeinflusst wird. Wie es in etwa aussehen sollte, kann man an dem eingefügten Bildern erkennen.

Würde mich über Verbesserungsvorschläge freuen, man lernt ja nie aus

Liebe Grüße, Lukas

Website:

Code:

HTML:

<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no" />
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" media="(min-device-width : 768px) and (max-device-width : 1024px)" type="text/css" href="style_mobile.css" />
    <!-- HTML5Shiv ("IE Fix") -->
    <!--[if lt IE 9]>
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
    <header id="header" class="clearfix">
        <div class="container"> <!-- Container zum mittig Ausrichten -->
            <h1 id="brand"><a title="Zurück zur Startseite" href="index.html"></a>Branding</h1> <!-- Logo über CSS einbinden -->
            <nav id="nav" role="navigation">
                <ul>
                    <li><a href="#">Home</a></li><!--
                    --><li><a href="#">Store</a></li><!--
                    --><li><a href="#">Designer</a></li><!--
                    --><li><a href="#">Lookbook</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main id="primary" class="clearfix" role="main"> <!-- Primärer Inhaltsbereich deiner Seite -->
        <section id="slideshow">
            <img src="pic/slideshow.png" alt="slider-image 1"/>
        </section>
        <section id="left_box">
            <!--<p>Find your favorite Designer</p>-->
            <div class="image">
                <a href="#"><img src="pic/left_box.png" alt="Find your favorite Designer"/></a>
            </div>
        </section>
        <section id="right_box">
            <!--<p>Looks great on you</p>-->
            <div class="image">
                <a href="#"><img src="pic/right_box.png" alt="Find your favorite Designer"/></a>
            </div>
        </section>
    </main>
    <footer>
        <div class="container">
            <div class="right">
                <a href="#">Contact</a>
                <a href="#">Imprint</a>
            </div>
        </div>
    </footer>
</body>
</html>

CSS:

@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Roboto);
*{padding:0;margin:0;font-family: 'Roboto', sans-serif;font-size:16px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}

#header {
    background-color:#5b5b5b;
    border-top:10px #828282 solid;
    border-bottom:10px #828282 solid;
    position: fixed;
    top:0;
    width:100%;
    height:auto;
    z-index:9999;
}

#brand {
    float: left;
    display:block;
}

#brand a {
    width:625px;
    height:141px;
    text-indent:-9999em; /* Link verschieben ("ausblenden") */
    overflow:hidden;
    display:block; /* Für Höhen und Breitenangabe */
    background:url(pic/brand.png) no-repeat;
}

.container {
    max-width:1250px;
    margin:auto;
}

img {
    max-width:100%;
    display: block;
    margin:0;
}

#nav ul {
    float:right;
}

#nav li {
    display:inline-block;
    width:141px;
    height:43px;
    text-align: center;
    background-color:#828282;
    cursor:pointer;
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    margin: 48px 4px 48px 0px;
}

#nav li:hover {
    background:#676767;
}

#nav a {
    color:#FFF;
    font-size:17px;
    text-transform: uppercase;
    display:inline-block;
    line-height:43px;
    list-style:none;
    text-decoration:none;
}

#primary {
    margin-top:159px;
}

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

#slideshow {
    z-index:9998;
}

#left_box {
    width:50%;
    height:36.000em;
    overflow: hidden;
    float: left;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    z-index:9995;
}

#left_box p{
    z-index:9997;
}

#right_box p{
    z-index:9996;
}

#right_box {
    width:50%;
    height:36.000em;
    overflow: hidden;
    float: right;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.image {
    width: 100%;
    height: 100%;
}

.image img {
    -webkit-transition: all 0.5s ease; /* Safari and Chrome */
    -moz-transition: all 0.5s ease; /* Firefox */
    -ms-transition: all 0.5s ease; /* IE 9 */
    -o-transition: all 0.5s ease; /* Opera */
    transition: all 0.5s ease;
}

.image:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

footer {
    width:100%;
    height:43px;
    background-color:#403f3f;
    position: absolute;
    line-height: 43px;
}

footer a {
    color:#f3f3f3;
    font-size:20px;
    text-decoration: none;
    cursor:pointor;
    margin-left:8px;
    margin-right:5px;
    -webkit-transition-property: color;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
}

footer a:hover {
    color:#676767;
}

.right {
    width:auto;
    float:right;
}

/*mobile*/
@media screen and (max-device-width:1024px) {
*{font-family: 'Open Sans', sans-serif;}
#header {
    border-bottom: none;
    border-top:5px #828282 solid;
}

#primary {
    margin-top:166px;
}

#brand {
    float: none;
    margin:0 auto;
    max-width:50%;
    margin-top:5px;
    margin-bottom:5px;
}

#nav ul {
    margin:auto;
    float:none;
}

#nav li {
    display:inline-block;
    width: 25%;
    height: 43px;
    text-align: center;
    background-color: #828282;
    cursor:pointor;
    margin: 0px 0px 0px 0px;
}

nav a {
    color:#f3f3f3;
    font-size:17px;
    font-family:'Open Sans', sans-serif;
    display:inline-block;
    line-height: 43px;
    list-style: none;
    text-decoration: none;
}

}

Enigmon · 08.02.2015

Schau dir das mal an:

http://hasinhayder.github.io/ImageCaptionHoverAnimation/

Example4

Gruss
Thomas

CreativeMind · 08.02.2015

Ja sowas suche ich, aber das bei mir einzubinden find ich ziemlich schwierig, da es auch responsive sein sollte.

lucifer-bw · 09.02.2015

Versuch's mit line-height:0 für alle Elemente in deinem animierten Container um den schmalen Streifen am Boden zu umgehen und positioniere dann deine Überschriften absolut:

CreativeMind · 09.02.2015

Danke für die Hilfe, jetzt klappt alles ^^
Sicherheitshalber füg ich den Code nochmals hier ein, bevor der noch gelöscht wird oder so und dann der Thread für andere nutzlos wird

Code (by lucifer-bw):

HTML:

<body>
    <div id="imageshow" class="float-clear">
        <div class="float-left half">
            <img src="http://sc-feinheiten.de/iclonesstyles/pic/home/left_box.png" />
            <h2>Find your favorite Designer</h2>
        </div>
        <div class="float-right half">
            <img src="http://sc-feinheiten.de/iclonesstyles/pic/home/right_box.png" />
            <h2>Looks great on you</h2>
        </div>
    </div>
</body>

CSS:

body{background:#f2f2f2}
img{max-width:100%;height:auto;top:0;left:0;bottom:0;right;0;}

.float-clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.float-left{float:left;}
.float-right{float:right;}
.half{width:50%;overflow:hidden;position:relative;}

#imageshow img{-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
#imageshow .half:hover img{-moz-transform: scale(1.5);-webkit-transform: scale(1.5);-o-transform: scale(1.5);-ms-transform: scale(1.5);transform: scale(1.5);}

/* Let's do the Magic */ 
#imageshow *{line-height:0;}
#imageshow h2{color:#fff;position:absolute;top:0;right:0;bottom:0;left:0;display:block;text-align:center;line-height:3em;}