JSFiddle - React, Tailwind, and code Playground

by Anna

HTML

<body>
  <p align="center">
    Допустим, мы хотим, чтобы все изображения нашего сайта были оформлены одинаково. Воспользуемся для этого CSS.
    <br>Зададим для всех картинок одинаковый размер и цвет рамки.
    <br>
    <img src="https://i.ytimg.com/vi/PgOHv0SA16I/maxresdefault.jpg">
    <img src="http://img11.nnm.me/4/8/9/9/b/4899b8bf310e8e8772bee1f1af824d20_full.jpg">
    <br> Картинки (и не только) можно менять при наведении курсора. Для этого добавим в код псевдокласс :hover. Теперь при наведении на картинку у неё меняется размер и цвет рамки.
    <br>
    <br>Установим картинке прозрачность. Для этого добавим в css новый класс - tranparent - и зададим у него свойство opacity, отвечающее за прозрачность.
    <br>
    <img src="https://i.ytimg.com/vi/PgOHv0SA16I/maxresdefault.jpg" class="transparent">

  </p>
</body>

CSS

p {
    font-family: "Times New Roman";
    font-size: 20px;
  }
  
  img {
    border: 4px double red;
    width: 300px;
    height: 200px;
  }
  
  img:hover {
    border: 4px solid green;
    width: 400px;
    height: 300px;
  }
  
  .transparent {
    filter: alpha(Opacity=50);
    opacity: 0.5;
  }