Christina94
Neues Mitglied
Hallo zusammen,
ich bearbeite derzeit eine Website und habe 6 Container, bestehend aus Bidler, in zwei Reihen designt und ein mouseover drüber gelegt. Beim mouseover über die Bild-Container erscheint ein Wort welches in weiß angezeigt werden soll. Online auf der Website kommt die Schrift in blau..kann mir jemand helfen und sagen an was das liegt? Bin nämlich langsam echt verzweifelt...
Hier meine html text:
.line {
position: relative;
width: 100%;
float: left;
display: inline;
}
.container1 {
position: relative;
width: 30%;
float: left;
margin-left: 0%;
margin-bottom: 0%;
box-shadow: silver 0px 0px 10px;
}
.container2 {
position: relative;
width: 30%;
float: left;
margin-left: 1.5%;
margin-bottom: .5%;
box-shadow: silver 0px 0px 10px;
}
.container3 {
position: relative;
width: 30%;
float: left;
margin-left: 1.5%;
margin-bottom: .5%;
box-shadow: silver 0px 0px 10px;
}
.image {
display: block;
width: 100%;
height: auto;
opacity: 1;
}
.overlay1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.container1:hover .overlay1 {
opacity: 0.5;
}
.overlay2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.container2:hover .overlay2 {
opacity: 0.5;
}
.overlay3 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.container3:hover .overlay3 {
opacity: 0.5;
}
.text {
color: black;
font-size: 2em;
position: absolute;
text-align: center;
bottom: 5%;
left: 5%;
right: 5%;
opacity: 1;
transition: 10.5s ease;
font-family: 'Bosch Office Sans';
font-weight: bold;
}
.text-overlay {
color: blueviolet;
font-size: 2.8em;
line-height: 2.9;
position: absolute;
top: 70%;
left: 5%;
right: 10%;
text-align: right;
opacity: 0;
transition: .5s ease;
font-family: 'Bosch Office Sans';
}
all-content.a {
text-decoration: none;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: white;
text-decoration: none;
}
a:hover {
color: white;
font-weight: lighter;
text-decoration: none;
}
.container1:hover .text-overlay{
opacity: 1;
}
.container2:hover .text-overlay {
opacity: 1;
}
.container3:hover .text-overlay {
opacity: 1;
}
}
</style>
Vielen Dank schon einmal für eure Hilfe!!
Liebe Grüße Christina
ich bearbeite derzeit eine Website und habe 6 Container, bestehend aus Bidler, in zwei Reihen designt und ein mouseover drüber gelegt. Beim mouseover über die Bild-Container erscheint ein Wort welches in weiß angezeigt werden soll. Online auf der Website kommt die Schrift in blau..kann mir jemand helfen und sagen an was das liegt? Bin nämlich langsam echt verzweifelt...
Hier meine html text:
.line {
position: relative;
width: 100%;
float: left;
display: inline;
}
.container1 {
position: relative;
width: 30%;
float: left;
margin-left: 0%;
margin-bottom: 0%;
box-shadow: silver 0px 0px 10px;
}
.container2 {
position: relative;
width: 30%;
float: left;
margin-left: 1.5%;
margin-bottom: .5%;
box-shadow: silver 0px 0px 10px;
}
.container3 {
position: relative;
width: 30%;
float: left;
margin-left: 1.5%;
margin-bottom: .5%;
box-shadow: silver 0px 0px 10px;
}
.image {
display: block;
width: 100%;
height: auto;
opacity: 1;
}
.overlay1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.container1:hover .overlay1 {
opacity: 0.5;
}
.overlay2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.container2:hover .overlay2 {
opacity: 0.5;
}
.overlay3 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.container3:hover .overlay3 {
opacity: 0.5;
}
.text {
color: black;
font-size: 2em;
position: absolute;
text-align: center;
bottom: 5%;
left: 5%;
right: 5%;
opacity: 1;
transition: 10.5s ease;
font-family: 'Bosch Office Sans';
font-weight: bold;
}
.text-overlay {
color: blueviolet;
font-size: 2.8em;
line-height: 2.9;
position: absolute;
top: 70%;
left: 5%;
right: 10%;
text-align: right;
opacity: 0;
transition: .5s ease;
font-family: 'Bosch Office Sans';
}
all-content.a {
text-decoration: none;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: white;
text-decoration: none;
}
a:hover {
color: white;
font-weight: lighter;
text-decoration: none;
}
.container1:hover .text-overlay{
opacity: 1;
}
.container2:hover .text-overlay {
opacity: 1;
}
.container3:hover .text-overlay {
opacity: 1;
}
}
</style>
Vielen Dank schon einmal für eure Hilfe!!
Liebe Grüße Christina
Zuletzt bearbeitet: