Transition nie działa z diasply:none i display:block;

Question

Witam mam taki kod w html

<div class="okienko"> <p class="srodek">Dallas</p>  <img class="logo" src="slajdy/Dallas.jpg"></img> </div>

i  css jego

.logo
{
	width:255px; 
	height:250px;
	border-radius:10px;
	z-index:1;
		transition:0.3s;
}
.logo:hover
{

	opacity:0.5;
	transition:0.3s;
	cursor:pointer;
}
.srodek
{
	margin-top:0;
	width:255px; 
	height:250px;
	display:none;
	font-size:30px;
	text-align:center;
	z-index:2;
	position:absolute;
	transition:0.3s;
	cursor:pointer;
}

.okienko:hover .srodek
{
	opacity:0.5;
	background-color:green;
	transition:0.5s;
	display:block;
}

Jak najeżdzam to zmienia mi na napis, i podmienia background-color tylko transition  nie działa. Wszystkie go róbowałem przełącza po najechaniu tak jakby odrazu. Jakieś pomysły chłopaki?

Answer 1

Nie da się zrobić, żeby display przełączał się płynnie. Jeżeli chcesz uzyskać taki efekt użyj opacity.

Comments

Źródło -> Link