Не могу прикрепить значок крестика на открытое фото

Question

Попросил друг подшаманить сайт. Застрял на добавлении крестика закрытия. Ставится куда угодно, только не на открытое фото в окне. Подскажите что ни так делаю. Код такой:

/* Image */

.image {
  display: inline-block;
  border: 0;
}

.image img {
  display: block;
  width: 100%;
}

.image.avatar48 {
  width: 48px;
  height: 48px;
  background: #f00;
}

.image.avatar48 img {
  width: 48px;
  height: 48px;
}

.image.fit {
  display: block;
  width: 100%;
}

.image.featured {
  display: block;
  width: 100%;
  margin: 0 0 2em 0;
}

.image.left {
  float: left;
  margin: 0 2em 2em 0;
}

.image.centered {
  display: block;
  margin: 0 0 2em 0;
}

.image.centered img {
  margin: 0 auto;
  width: auto;
}


/* Item */

.item {
  box-shadow: 0 0.05em 0.15em 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 40px;
}

.item header {
  background: #fff;
  margin: 0;
  padding: 1em 0 1em 0;
  font-size: 0.8em;
}

.item header h3 {
  font-size: 1em;
}


/* Row */

.row {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  align-items: stretch;
}

.close {
  display: block;
  width: 30px;
  height: 30px;
  --weight: 3px;
  --aa: 1px;
  /* anti-aliasing */
  --color: red;
  border-radius: 3px;
  background: linear-gradient(45deg, transparent calc(50% - var(--weight) - var(--aa)), var(--color) calc(50% - var(--weight)), var(--color) calc(50% + var(--weight)), transparent calc(50% + var(--weight) + var(--aa))), linear-gradient(-45deg, transparent calc(50% - var(--weight) - var(--aa)), var(--color) calc(50% - var(--weight)), var(--color) calc(50% + var(--weight)), transparent calc(50% + var(--weight) + var(--aa)));
}

<!-- Portfolio1 -->
<section id="portfolio1" class="two">

  <div class="container">

    <header>
      <h2>Натяжные потолки</h2>
    </header>

    <p>Натяжные потолки - без стыков, швов и перепадов. Огромная палитра цветов и фактур.<br/> Наша команда профессионалов с многолетним стажем работы и огромным опытом - выполнит монтаж любой сложности в кратчайшие сроки. Использование профессионального
      инструмента обеспечивает чистый монтаж.<br/> Мы всегда готовы удивлять своих клиентов приятными скидками и акциями. Потолки Моло - это ваш правильный выбор.</p>

    <div class="row">

      <div class="col-4 col-12-mobile">

        <article class="item">

          <a href="images/foto102.jpg" class="image fit"><img src="images/foto102.jpg" alt="" /</a>

            <header>
              <h3>Световые линии зигзаг на натяжном потолке</h3>
            </header>
        </article>
        <article class="item">
          <a href="#" class="image fit"><img src="images/foto101.jpg" alt="" /></a>
          <header>
            <h3>Трековое освещение на натяжном потолке</h3>
          </header>
        </article>
        <!--<article class="item">
                                        <a href="#" class="image fit"><img src="images/foto107.jpg" alt="" /></a>
                                        <header>
                                            <h3>Фото 7</h3>
                                        </header>
                                    </article>-->

Надо как то прикрепить этот блок к ссылке на фото:

<div class="close"></div>

Я какие только коды не применял. Крестик то сверху, то снизу вокруг не открытого фото. Меня смущает этот кусок :

class="image fit"

Когда перед ним что то ставишь, ломается рамка и фото в полный размер на пол сайт. Извините за сумбур, в этом деле любитель. Но уже дело принципа!)

Answer 1

Я думаю должно быть что то типа этого. Исправил с возможными моими домыслами

 /* Image */

.image {
  display: inline-block;
  border: 0;
}

.image img {
  display: block;
  width: 100%;
}

.image.avatar48 {
  width: 48px;
  height: 48px;
  background: #f00;
}

.image.avatar48 img {
  width: 48px;
  height: 48px;
}

.image.fit {
  display: block;
  width: 100%;
}

.image.featured {
  display: block;
  width: 100%;
  margin: 0 0 2em 0;
}

.image.left {
  float: left;
  margin: 0 2em 2em 0;
}

.image.centered {
  display: block;
  margin: 0 0 2em 0;
}

.image.centered img {
  margin: 0 auto;
  width: auto;
}


/* Item */

.item {
  box-shadow: 0 0.05em 0.15em 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 40px;
  position: relative;
}

.item header {
  background: #fff;
  margin: 0;
  padding: 1em 0 1em 0;
  font-size: 0.8em;
}

.item header h3 {
  font-size: 1em;
}


/* Row */

.row {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  align-items: stretch;
}

.close {
  
  position: absolute;/*Добавляем к крестику*/
  top:1rem;/*Добавляем к крестику*/
  right: 1rem;/*Добавляем к крестику*/
  z-index: 1;/*Добавляем к крестику*/

  display: block;
  width: 30px;
  height: 30px;
  --weight: 3px;
  --aa: 1px;
  /* anti-aliasing */
  --color: red;
  border-radius: 3px;
  background: linear-gradient(45deg, transparent calc(50% - var(--weight) - var(--aa)), var(--color) calc(50% - var(--weight)), var(--color) calc(50% + var(--weight)), transparent calc(50% + var(--weight) + var(--aa))), linear-gradient(-45deg, transparent calc(50% - var(--weight) - var(--aa)), var(--color) calc(50% - var(--weight)), var(--color) calc(50% + var(--weight)), transparent calc(50% + var(--weight) + var(--aa)));
}

<!-- Portfolio1 -->
  <section id="portfolio1" class="two">

<div class="container">

  <header>
    <h2>Натяжные потолки</h2>
  </header>

  <p>Натяжные потолки - без стыков, швов и перепадов. Огромная палитра цветов и фактур.<br /> Наша команда
    профессионалов с многолетним стажем работы и огромным опытом - выполнит монтаж любой сложности в кратчайшие
    сроки. Использование профессионального
    инструмента обеспечивает чистый монтаж.<br /> Мы всегда готовы удивлять своих клиентов приятными скидками и
    акциями. Потолки Моло - это ваш правильный выбор.</p>

  <div class="row">

    <div class="col-4 col-12-mobile">

      <article class="item">
        <div class="close"></div>
        <a href="images/foto102.jpg" class="image fit">
          
          <img src="images/foto102.jpg" alt="" />
        </a>

          <header>
            <h3>Световые линии зигзаг на натяжном потолке</h3>
          </header>
      </article>
      <article class="item">
        <a href="#" class="image fit"><img src="images/foto101.jpg" alt="" /></a>
        <header>
          <h3>Трековое освещение на натяжном потолке</h3>
        </header>
      </article>
      <!--<article class="item">
                                    <a href="#" class="image fit"><img src="images/foto107.jpg" alt="" /></a>
                                    <header>
                                        <h3>Фото 7</h3>
                                    </header>
                                </article>-->

БЛОГ НА HUSL

Не могу прикрепить значок крестика на открытое фото

Ответы (1 шт):