olya_097

.icon {
  font-size: 60px;
  display: inline-block;
  border: 0.1em solid black;
  border-radius: 0.5em;
  width: 1em;
  height: 2em;
  position: relative;
}

.icon::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 0.2em;
  height: 0.2em;
  background: black;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  box-shadow: 0 -0.4em black, 0 0.4em black;
}

.icon::after {
  content: "";
  display: inline-block;
  border: 0.15em solid black;
  border-left: 0;
  border-top: 0;
  width: 0.4em;
  height: 0.4em;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.gallery__item:hover::before {
  content: "";
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  left: 10px;
  top: 10px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  background: transparent;
  z-index: 666;
}

$(window).resize(function() {
     if ($(window).width() <= 560) {
       $('.picture').css('background-image', 'url(' + $('.picture').data('bg-xs') + ')');
     }
     console.log($('.picture').data('bg-xs'));
   });

$(".filter__item").hover(function () {
	// Первая функция при наведении.
	let dataImage = $(this).children(".filter__image").attr('data-image');
	let image = $(this).find(".filter__image img");
	image.attr("data-src", image.attr("src"));
	image.attr("src", dataImage);
}, function() {
	// Вторая функция при отводе.
	let image = $(this).find(".filter__image img");
	image.attr("src", image.attr("data-src"));
});

.icon_i {
            position: relative;
            display: inline-block;
            width: 2em;
            height: 2em;
            line-height: 2em;
            font-size: 1em;
            color: red;
            text-align: center;
            font-style: italic;
            font-family: serif;
            border: 0.125em solid red;
            border-radius: 0.25em;
            z-index: 1;
            box-sizing: border-box;
            background-color: #fff;
            background-color: inherit;
        }

        .icon_i:after {
            content: '';
            position: absolute;
            left: calc(50% - 0.25em);
            bottom: -0.385em;
            width: 0.5em;
            height: 0.5em;
            border-right: 0.125em solid red;
            border-bottom: 0.125em solid red;
            z-index: -1;
            transform: rotate(45deg);
            box-sizing: border-box;
            background-color: inherit;
        }