Ich arbeite an einer Website und habe auf einer anderen etwas gesehen, was ich gut fand, und nun möchte ich dies auf meiner auch haben. Eine Information am Rande, ich arbeite mit Jimdo wo nicht jeder code funktioniert speziell style nicht (glaube ich). Also hätte da den code von der Website herauskopiert, falls das jemanden hilft. Ach ja es ist auch Javascript dabei :-D.
Ich selber bin ein noob im Scripten und programmieren, kann nur Basics.
Code
<style>
body{ background:grey;}
#div1{ margin:0 auto; height:153px; width:266px; border:2px solid white; background:lightgrey;}
h3{
text-align:center;
width:100%;
}
#out{
}
#in{ background-image: url(/image/icons_leistungen.svg);
background-position: 0px -93px; background-size: 460px 740px; display: inline-block;
margin-top:30px;
height:40px; width:50px;
margin-left:calc(50% - 25px);
}
#div1:hover{ background:#f93;}
#div1:hover >span #in{ background-position: 0px -93px; background-size: 460px 646px;}
#div1:hover div > h3{ color:white;}
h3{ text-align:center; color:black; font-weight:500;}
#raus{
height:120px;
margin-top:-50px;
overflow:hidden;
border:2px solid red;
display:block;
background:#123456;
color:white;
padding:20px;
text-align:center;
transform:rotateX(90deg);
transition:all 1s;
}
input{
display:none;
margin:0;
padding:0;
}
#rausradio:checked ~ a >label >#out >#raus{
display:block;
margin-top:40px;
transform:rotateX(0deg);
}
#rausradio:checked ~ a > label #in,#rausradio:checked ~ a > label h3{
color:red;
}
</style>
<body><div id="div1">
<input id="rausradio" type="checkbox">
<a href="#">
<label for="rausradio">
<div id="out">
<span id="in"></span>
<h3>Reifenangebot</h3>
<div id="raus">
<span> Dieser Text wird angezeigt wenn man af den Button klickt</span>
</div>
</div>
</label></a>
</div>