How to make the effect of floating information?

Question

css

In general, it is necessary that by clicking on the block with the photo and the name of the image, it would be pushed to the top and a paragraph with the description would appear. Can this be done using Css and is it necessary? or is it time to open books on JS and watch event handling?

Answer 1

Yes, I would implement it via CSS (and a bit of jQuery).
You need two styles:
default (original)
and modified - how the object should look after deformation
Roll up your sleeves, we need jQuery (library for JS), CSS and some HTML.
The structure of such a block is approximately the following:

<!-- Подключаем jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

<!-- Прописываем стили -->
<style type="text/css" media="screen">
  /* это сам блок, в котором все хранится */
  .block{ 
    background: black;
    height: 300px;
    width: 250px;
    overflow: hidden;
  }
  
  /* это золотой блок со всем текстом */
  .text{
    background: gold;
    position: relative;
    padding: 15px;
    font-size: 14pt;
    height: 100%;
    margin-top: 100%;
    cursor: pointer;
    transition: 0.5s margin-top; /* это свойство анимации 0.5s - это время, margin-top - что анимируем */
  }
  /* класс .show меняет margin-top со 100% до 0 - то есть поднимает блок вверх */
  .text.show{margin-top: 0;}
  
  /* это часть золотого текста - в нем хранится остальной текст */
  .more_text{
    margin-top: 25px;
    font-size: 11pt;
  }
</style>


<!-- Наш HTML -->
<div class='block'>
    <div class='text'>Здесь текст<div class='more_text'>Здесь больше текста...</div></div>
</div>



<script>
  //При нажатии на .text - на "нем переключается" класс .show, который регулирует уровень блока margin-top'ом
  $('.text').click(function(){
    $(this).toggleClass('show');
  });
</script>

Answer 2

In any case, you need to know how it's done in JS, otherwise it will be harder)
And in css, it's just a normal input type="radio"

Answer 3

You have already been given the correct answer. Don't listen to js and jquery. You don't need them here. It's done simply with CSS. 4 years ago I made up a template for Bitrix and showed what can be done with simple CSS. Look, everything is pure CSS - https://www.youtube.com/watch?v=0e17lKPatLs