# CodePen Home Image zoom on hover - auto run - view (ok)

## Ví dụ 1:

C:\xampp\htdocs\test\index.html

```
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Document</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<div class="wrapper">
  <div class="parent">
    <div class="child bg-one">
      <a href="#">Los Angeles</a>
    </div>
  </div>
  <div class="parent right">
    <div class="child bg-two">
      <a href="#">London</a>
    </div>
  </div>
  <div class="parent">
    <div class="child bg-three">
      <a href="#">New York</a>
    </div>
  </div>
  <div class="parent right">
    <div class="child bg-four">
      <a href="#">Hollywood</a>
    </div>
  </div>
  <div class="parent">
    <div class="child bg-five">
      <a href="#">Dubai</a>
    </div>
  </div>
  <div class="parent right">
    <div class="child bg-six">
      <a href="#">San Francisco</a>
    </div>
  </div>
</div>
</body>
</html>
```

C:\xampp\htdocs\test\style.css

```
/* Global Styling */
html,
body {
  margin: 0px;
  padding: 0px;
}
nav {
  background-color: #34495e;
  height: 80px;
  position: fixed;
  width: 100vw;
  top: 0;
  z-index: 999;
}
#logo {
  height: 80px;
  margin-left: 20px;
}
.wrapper {
  padding: 50px 50px;
  max-width: 1200px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
}
.right {
  float: right !important;
}
/* Image zoom on hover + Overlay colour */
.parent {
  width: 45%;
  margin: 20px;
  height: 300px;
  border: 1px solid blue;
  overflow: hidden;
  position: relative;
  float: left;
  display: inline-block;
  cursor: pointer;
}
.child {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}
/* Several different images */
.bg-one {
  background-image: url(https://media.timeout.com/images/101602611/image.jpg);
}
.bg-two {
  background-image: url(http://s1.it.atcdn.net/wp-content/uploads/2015/08/2-London.jpg);
}
.bg-three {
  background-image: url(https://media.timeout.com/images/101484105/image.jpg);
}
.bg-four {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Hollywood_Sign.jpg/1280px-Hollywood_Sign.jpg);
}
.bg-five {
  background-image: url(http://www.travelandleisure.com/sites/default/files/styles/tnl_redesign_article_landing_page/public/1453920892/DUBAI-554088081-ABOVE0116.jpg?itok=dcoZnCrc);
}
.bg-six {
  background-image: url(http://www.travelandleisure.com/sites/default/files/styles/tnl_redesign_article_landing_page/public/1453920892/DUBAI-554088081-ABOVE0116.jpg?itok=dcoZnCrc);
}
a {
  display: none;
  font-size: 35px;
  color: #ffffff !important;
  font-family: sans-serif;
  text-align: center;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 50px;
  cursor: pointer;
  /*text-decoration: none;*/
}
.parent:hover .child,
.parent:focus .child {
  -ms-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}
.parent:hover .child:before,
.parent:focus .child:before {
  display: block;
}
.parent:hover a,
.parent:focus a {
  display: block;
}
.child:before {
  content: "";
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(52, 73, 94, 0.75);
}
/* Media Queries */
@media screen and (max-width: 960px) {
  .parent {
    width: 100%;
    margin: 20px 0px
  }
  .wrapper {
    padding: 20px 20px;
  }
}
.hello {
  display: none
}
```

## Ví dụ 2:&#x20;

C:\xampp\htdocs\test\index.html

```
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- Latest compiled and minified CSS & JS -->
  <script src="https://code.jquery.com/jquery.js"></script>
  <script type="text/javascript">
    function isScrolledIntoView(elem) {
      if ($(elem).length == 0) {
          return false;
      }
      var docViewTop = $(window).scrollTop();
      var docViewBottom = docViewTop + $(window).height();
      var elemTop = $(elem).offset().top;
      var elemBottom = elemTop + $(elem).height();
      //  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); //try it, will only work for text
      return (docViewBottom >= elemTop && docViewTop <= elemBottom);
    }
     $(window).on('scroll', function() {
        $('.noidung').each(function() {
          if(isScrolledIntoView(this)) {
            $(this).addClass('active');
          }
        });
      });
  </script>
  <title>Document</title>
</head>

<body>
  <!--Niềm Vui Lập Trình-->
  <h4>Hiệu Ứng Zoom In</h4>
  <p class="p">Bạn hãy hover vào ảnh bên dưới nhé</p>
  <div class="zoomin noidung">
    <img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1597819923/y2mnobp2xxbujtf2ptsf.jpg" title="Hiệu Ứng Zoom in" />
  </div>
</body>

</html>
```

C:\xampp\htdocs\test\style.css

```
p {
  height: 1200px;
}
.noidung {
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.zoomin img {
  height: 200px;
  width: 200px;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease;
  transition-delay: 0.5s;
}
.zoomin.active img {
  transform: scale(1.5);
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learncss.gitbook.io/cssadvand/codepen-home-image-zoom-on-hover-auto-run-view-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
