Hướng dẫn css zoom background image on hover codepen - css zoom ảnh nền trên codepen di chuột

Question

Tôi đang cố gắng để có một văn bản trượt lên với một lớp phủ nhưng vấn đề là lớp phủ đang trượt lên với văn bản với nhau những gì tôi thực sự muốn là lớp phủ có hiệu lực với hình ảnh và văn bản trượt lên đây là một tấm gương Tôi đang làm việc và tôi vẫn không thể đạt được nó. Codepen apred trừ đi sự phóng to có hiệu lực

.clients {
  position: relative;
}

.client-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.client-container .product-desc {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: left;
  align-items: center;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  text-align: right;
  padding: 14em 0.4em 0.2em;
  -webkit-transform: translateY(101%);
  transform: translateY(101%);
  transition: -webkit-transform 0.8s ease-in-out;
  transition: transform 0.8s ease-in-out;
  transition: transform 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
}

.client-container:hover .product-desc {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.client-container .product-desc2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: left;
  align-items: center;
  color: #fff;
  text-align: right;
  padding: 17em 0.4em 0.2em;
  -webkit-transform: translateY(101%);
  transform: translateY(101%);
  transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
}

.client-container:hover .product-desc2 {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.brand-img {
  display: block;
  max-width: 100%;
  height: auto;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.clients:hover .brand-img {
  cursor: pointer;
  transform: scale(1.5);
  -ms-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.5);
}

<link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
  <a href="#">
    <figure class="client-container">
      <img class="img-fluid brand-img" src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" alt="Logo">
      <figcaption class="product-desc">
        <P>paragraphparagraphparagraph</P>
      </figcaption>
      <figcaption class="product-desc2">
        <h4>text</h4>
      </figcaption>
    </figure>
  </a>
</div>

Dejan.S

Phim thương hiệu vàng 18K2222 gold badges67 silver badges110 bronze badges

2

Bạn có thể thêm một giả vào thùng chứa, theo cách đó, nền "là có" và thực hiện công việc mờ dần khi cần thiết. Bằng cách đó, văn bản là thực thể của chính nó và bạn có thể tự do tạo kiểu cho cả hai theo cách bạn muốn. Tôi đã thêm

.client-container::after
.client-container:hover::after

và loại bỏ background-color trên chú thích FIG đầu tiên.

.clients {
  position: relative;
}

.client-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.client-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  z-index: 0;
}

.client-container:hover::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 350ms;
}

.product-desc {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: left;
  align-items: center;
  color: #fff;
  text-align: right;
  padding: 14em 0.4em 0.2em;
  -webkit-transform: translateY(101%);
  transform: translateY(101%);
  transition: -webkit-transform 0.8s ease-in-out;
  transition: transform 0.8s ease-in-out;
  transition: transform 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
  z-index: 1;
}

.client-container:hover .product-desc {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.product-desc2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: left;
  align-items: center;
  color: #fff;
  text-align: right;
  padding: 17em 0.4em 0.2em;
  -webkit-transform: translateY(101%);
  transform: translateY(101%);
  transition: -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out;
  transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
  z-index: 1;
}

.client-container:hover .product-desc2 {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.brand-img {
  display: block;
  max-width: 100%;
  height: auto;
  transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.clients:hover .brand-img {
  cursor: pointer;
  transform: scale(1.5);
  -ms-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.5);
}

<link href="https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
  <a href="#">
    <figure class="client-container">
      <img class="img-fluid brand-img" src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" alt="Logo">
      <figcaption class="product-desc">
        <P>paragraphparagraphparagraph</P>
      </figcaption>
      <figcaption class="product-desc2">
        <h4>text</h4>
      </figcaption>
    </figure>
  </a>
</div>

Đã trả lời ngày 24 tháng 1 lúc 7:08Jan 24 at 7:08

Dejan.SDejan.SDejan.S

Phim thương hiệu vàng 18K2222 gold badges67 silver badges110 bronze badges

0

Bạn có thể thêm một giả vào thùng chứa, theo cách đó, nền "là có" và thực hiện công việc mờ dần khi cần thiết. Bằng cách đó, văn bản là thực thể của chính nó và bạn có thể tự do tạo kiểu cho cả hai theo cách bạn muốn. Tôi đã thêm

và loại bỏ background-color trên chú thích FIG đầu tiên.

Đã trả lời ngày 24 tháng 1 lúc 7:08Jan 23 at 23:25

T-ST-ST-S

Tôi đang gặp khó khăn khi hiểu những gì bạn đang cố gắng thực hiện. Điều tôi nghĩ bạn muốn là khi một khách hàng lơ lửng trên hình ảnh rằng có một thu phóng nhỏ và một số văn bản đi lên. Nhưng bạn không muốn họ nhìn thấy lớp phủ phải không?1 silver badge6 bronze badges

programming css CSS zoom image Zoom in CodePen