Tell me how to make a smooth appearance of the picture, it turns out only the text. Thank you in advance!

html, body { margin: 0; padding: 0; } body { width: 100px; min-height: 400px; padding: 30px; font-family: Monotype Corsiva; font-size: 35px; font-weight: normal; line-height: 1.4; background: #FFFFFF; } .menu { margin: 0; padding: 0; width: 300px; list-style: none; } .menu li { border-bottom: 3px solid #003399; } .menu .active { border-color: #003399; } .menu a { display: block; padding: 20px 20px; background: #8B0000; color: white; text-decoration: none; list-style: none; } .menu a:hover { color: #FF4500; transition: 3s; } .main-menu>.active>a { color: white; background: #0088cc; } .main-menu ul { margin: 0; padding: 0; list-style: none; } a:link img, a:visited img { display: none; } a:hover img, a:active img { display: block } a:link img { position: relative; left: 165px; margin: 0px 0px 0px 20px; top: 5px; width: 500px; height: 300px; } 
 <ul class="menu"> <li><a href="#ulusoy">Чагатай Улусой <img src="ulusoy.jpg"/></a></li> <li><a href="#duymaz">Альперен Дуймаз <img src="duymaz.jpg"/></a></li> <li><a href="#aka">Кубилай Ака <img src="aka.jpg"/></a></li> <li><a href="#andic">Фуркан Андыч <img src="andic.jpg"/></a></li> </ul>

  • The transition for the text is obtained, but for the picture where to insert it? - Diana

1 answer 1

What I've done ?

I am the block that appears when hover pushed to the right left: calc(100% + 80px); and also put it vertically in the center top: 50%; margin-top: -50%; top: 50%; margin-top: -50%; but that the Parent for the hidden element would not be the block in which it is located, I indicated that the parent for it the main block is done this way: position:relative; and with hover in turn I show setting the transition:0.5s; when specifying opacity which is animated unlike display

look at the whole screen

 *{ margin:0; padding:0; box-sizing:border-box; } .items{ width:200px; position:relative; } .img{ position: absolute; left:calc(100% + 200px); top:50%; margin-top:-30%; visibility: hidden; opacity:0; transition:.5s; transform:scale(0); } .item{ width:200px; height:200px; color:#fff; font-size:2em; zoom:0.6; } .item.blue{background:#0000cc;} .item.darkred{background:#cc0000;} .item.lightgreen{background:#00ff00;} .item:hover .img{ visibility: visible; opacity:1; transform:scale(2); } .item span{ opacity:0.5; transition:0.5s; } .item:hover span{ opacity:1; } 
 <div class="items"> <div class="item blue"> <span>Block1</span> <div class="img"> <img src="http://placehold.it/200/0000cc" alt=""> </div> </div> <div class="item darkred"> <span>Block2</span> <div class="img"> <img src="http://placehold.it/200/cc0000" alt=""> </div> </div> <div class="item lightgreen"> <span>Block3</span> <div class="img"> <img src="http://placehold.it/200/00ff00" alt=""> </div> </div> </div>