Natours–section

Describe how the :not pseudo selector works. Give an example in an Enlighter code snippet to support your description.

:not pseudo represents elements that do not match a list of selectors.

.composition {
  position: relative;

  &__photo {
      width: 55%;
      box-shadow: 0 1.5rem 4rem rgba($color-black, .4);
      border-radius: .2px;
      position: absolute;
      z-index:10;
      transition: all .2s;
      outline-offset:2rem;
     


      &--p1 {
          left: 0;
          top: -2rem;
      }

      &--p2 {
          right: 0;
          top: 2rem;
      }

      &--p3 {
          left: 20%;
          top: 10rem;
      }

      &:hover {
          outline: 1.5rem solid $color-primary;
          transform: scale(1.05) translateY(-.5rem);
          box-shadow: 0 2.5rem 4rem rgba($color-black, .5);
          z-index: 20;
      }
  }

Leave a comment

Your email address will not be published. Required fields are marked *

css.php