Как создать: эскиз

Узнайте, как создать эскиз.

Эскиз

Эскиз - это маленькое изображение, представляющее собой большее изображение (при нажатии), обычно его можно узнать по окружающему контуру:

Тюльпан

Как создать эскиз

Используйте элемент <img> и оберните его элементом <a>. Установите стиль изображения с помощью границ и добавьте эффект наведения:

<style>
img {
  border: 1px solid #ddd; /* Серая граница */
  border-radius: 4px;  /* Овальная граница */
  padding: 5px; /* Некоторое выравнивание по краям */
  width: 150px; /* Установить малую ширину */
}
/* Добавление эффекта наведения (синяя тень) */
img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
<body>
<a target="_blank" href="img_forest.jpg">
  <img src="img_forest.jpg" alt="Forest">
</a>
</body>

Попробуйте сами

Соответствующие страницы

Учебник:CSS изображение