Kod na stronkę

Question

Czy ktoś dał by radę napisać albo podlinkować kod który sprawi że po najechaniu div zmieni wygląd (jak na obrazkach )   Z 1A   do    1B

 

                Obrazek : 1B

                  Obrazek : 1A

Answer 1

Tworzysz div-a i wrzucasz do niego zdjęcie i następny div, w którym będzie cena i kup teraz.

W drugim div-ie musisz ustawić dwa elementy obok siebie. Możesz do tego użyć:

• float: left
• display: inline-block
• flexbox
• grid
• ... i jeszcze pewnie ze 100 sposobów.

O każdym tym sposobie możesz przeczytać wpisując jego "nazwę" w Google.

Answer 2

Coś takiego:

<link rel="stylesheet" href="antylopa.css"/>

<div id="ramka">

	<div id="ramka2">
		<div id="rectangle_giant"></div>
		<div id="rectangle"><strong><a href="">CENA PLN</a></strong></div>
		<div id="rectangle"><strong><a href="">KUP TERAZ</a></strong></div>
	</div>

</div>

</body>

body{ 
	background:darkgreen;
}
#ramka{ 
	border:5px solid black;
	width:150px;
	height:250px;
}
#ramka2{ 
	border:5px solid black;
	width:120px;
	height:220px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
}
#rectangle{
	background:red;
	width:60px;
	height:50px;
	float:left;
	font-size:10px;
	vertical-align:middle;
	line-height:50px;
	display:none;
}
#rectangle_giant{
	background:blue;
	height:170px;
}
#ramka2:hover #rectangle{ 
	display:block;
}

?

Comments

Thank You

Answer 3

Witam

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="card">
  <div class="bg_card"></div>
  <div class="price">Cena: 50 zł</div>
  <div class="by_now">Kup Teraz</div>
</div>
<script>
$(document).ready(function(){
  $( ".bg_card" ).hover(
  function() {
    $(this).css({"height":"100%"});
  }, function() {
    $(this).css({"height":"320px"});
  }
);
});
</script>

body{
background-color: grey;
}
*{
box-sizing: border-box;
transition: all .5s;
}
.card{
width: 300px;
height: 400px;
border: 5px solid #332830;
padding: 7px;
text-align: center;
overflow: hidden;
}
.bg_card{
width: 276px;
height: 320px;
border: 5px solid #aba8aa;
background-image: url("http://ecsmedia.pl/c/html-i-css-zaprojektuj-i-zbuduj-witryne-www-w-iext43254859.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.price, .by_now{
display: inline-block;
width: 49%;
height: 50px;
margin-top: 7px;
background-color: #332830;
color: white;
font-size: 22px;
line-height: 53px;
}
.price:hover, .by_now:hover{
color: #2c2929;
 background-color: #aba8aa;
}
:hover{
cursor: pointer;
}