Html Css Bild hover Deckkraft zu ändern und text ohne text die Deckkraft zu verändern?

Ich will es so, dass wenn ich den Mauszeiger über das Bild, der text erscheint so wie ich es haben außer Ihrer Deckkraft ist unverändert.

Beispiel: http://jsfiddle.net/guineapig101/UEtLJ/

html:

<a class="img1"><p class="hoverText">yoooo</p></a>

css:

html,body{
width: 100%;
height: 100%;
background-color: #000;
}

p{
color: #fff;
font-size: 16px;
font-family: arial, arial black, italic;
}
.hoverText{
text-align: center;
visibility: hidden;
position: relative;
}
.img1{
position: absolute;
background-image: url('http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-       3.jpg');
top: 0px;
left:0px;
width: 30%;
height: 40%;
}
.img1:hover p{
visibility: visible;
z-index: 9000;
}
.img1:hover{
cursor: pointer;
opacity: 0.6;
-webkit-transition: opacity;
-webkit-transition-property: opacity;
-webkit-transition-duration: 500ms;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: initial;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
  • Sie kann sich nicht auf die Deckkraft des Hintergrundbildes..Sie würde verwenden, ein Bild in den HTML-Code. Zeit neu zu strukturieren.
InformationsquelleAutor CodingBoss69 | 2014-08-03
  1. 1

    Sie kann sich nicht auf die Deckkraft des Hintergrundbildes..die Sie normalerweise verwenden, ein Bild in der HTML -, sondern als ein unsemantic zusätzliches element rein für styling Zwecke, die Sie verwalten können diese mit einem pseudo-element so gerne.

    JSfiddle

    CSS

    html,body{
    width: 100%;
    height: 100%;
   background-color: #000;
}

p{
    color: #fff;
    font-size: 16px;
    font-family: arial, arial black, italic;
}
.hoverText{
    text-align: center;
    visibility: hidden;
    position: relative;
}

.img1:hover .hoverText{
    visibility: visible;
    cursor: pointer;
}

.img1{
    position: absolute;
    top: 0px;
    left:0px;
    width: 30%;
    height: 40%;
}
.img1:before {
    content:"";
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-image: url('http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg');
    transition:opacity.5s ease;
}
.img1:hover:before {
    opacity:0.6;
}
    • Das ist es. Der perfekte Weg, es zu tun...
    InformationsquelleAutor Paulie_D
  2. 0

    Müssten Sie ein weiteres element, um das Bild, so dass der text nicht in das element, dass Sie die "Deckkraft" auf:

    HTML:

    <a class="img1"><span></span><p class="hoverText">yoooo</p></a>

    CSS:

    html,body{
    width: 100%;
    height: 100%;
   background-color: #000;
}

p{
    color: #fff;
    font-size: 16px;
    font-family: arial, arial black, italic;
}
.hoverText{
    text-align: center;
    visibility: hidden;
    position: relative;
}
.img1{
    position: absolute;
    top: 0px;
    left:0px;
    width: 30%;
    height: 40%;
    cursor: pointer;
}
.img1 span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg');
}
.img1:hover p{
    visibility: visible;
    z-index: 9000;
}
.img1:hover{
-webkit-transition: opacity;
-webkit-transition-property: opacity;
-webkit-transition-duration: 500ms;
-webkit-transition-timing-function: ease-out;
-webkit-transition-delay: initial;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
.img1:hover span {
    opacity: 0.6;
}

    Demo: http://jsfiddle.net/UEtLJ/3/

    InformationsquelleAutor Guffa
Schreibe einen Kommentar