JavaScript

Federico Lemaire
PRO
Federico Lemaire
Pro Student 4,099 Points

Hi everyone! Can you help me with a task? I need to inrease the size of an image when I hover it

Hi there! I have a container with 6 imgs in two rows of 3 imgs each. I'm trying to do it with jquery but the console throw me an error saying that $ is not defined. Here is the js code

$('.imgHover').click(function() { $(this).height(400); $(this).width(600); $(this).off(); })

I've tried with css and the img increase the size but inside the box, and I want that the img increase and shows going out the box.

Sorry for my english, if is need it, I can share the whole code.

5 Answers

Steven Parker
Steven Parker
187,496 Points

If you were using a CSS transform (like "scale"), the container size would not change which may have caused "going out the box".

But if you adjust the height and width directly, the container should accommodate the size change.

If you still have trouble, show your actual code to allow a more explicit answer.

UPDATE: From looking at the code, it seems like this would do it:

.main-services img:hover {
  width: 650px;
  height: 350px;
}
Steven Parker
Steven Parker
187,496 Points

Here is some recommended CSS after seeing the workspace snapshot:

.main-services img {
    transition: transform .5s;  /* bonus suggestion: make changes smooth */
}
.main-services img:hover {
    transform: scale(2);        /* the shifting aspect ratio looked strange */
    position: relative;         /* activates z-index */
    z-index: 1;                 /* put this image on top */
}
Federico Lemaire
PRO
Federico Lemaire
Pro Student 4,099 Points

Hi Steven! Thanks for the answear! I gave up, I couldn't find the answer to do it. I leave you the code so you can understand a little bit more and I leave you a picture of the design so you can see what I need to do.

https://codepen.io/Fairfaxx/pen/LYVMzYX

Ps: I've tried to upload a picture but I didn't know how to do it :)

Steven Parker
Steven Parker
187,496 Points

I don't think codepen will store images (maybe the commercial version will). But you can upload images easily into a workspace.

Also, I don't see the "box" you mentioned. in the codepen.

But just looking at the code, I updated my original answer.

Federico Lemaire
PRO
Federico Lemaire
Pro Student 4,099 Points

Hi Steven! The solution you shared to me it's working, but the img when I hover expands behind the next img, I want the img to expands over the other ones. I leave you the whole code and the whole css. If you have some time, maybe you can help me with other issue that I'm having, it's with the footer, I can't see it, it fixed behind the form section and I cant fixed, I mean I fixed to the bottom but it is like a part of the same section. Thank!!!

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Font-awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
    crossorigin="anonymous">
<!-- La Soñada CSS -->
<link rel="stylesheet" type="text/css" href="sonada.css">
<!-- Google Fonts "Poppins" -->
<link href="https://fonts.googleapis.com/css?family=Poppins:400,600,700&display=swap" rel="stylesheet">
<script type="text/javascript" src="sonada.js"></script>
<title>Posada La Soñada</title>
</head>

<body> <nav class="navbar navbar-expand-lg navbar-light bg-light > <a class="navbar-brand" href="#">LA SOÑADA</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Habitaciones<span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Servicios</a> <a class="nav-item nav-link" href="#">Ubicación</a> <a class="nav-item nav-link" href="#">¿Quienes Somos?</a> <a class="nav-item nav-link" href="#">Galeria</a> <a class="nav-item nav-link" href="#">Contacto</a> </div> </div> </nav>

<header class="main-header">
    <span class="title"><h1>Tu descanso soñado. <br>
    Una vista privilegiada.</h1></span>
    <div>
        <h3>Descubrí Posada La Soñada.</h3>
    </div>

    <div>
        <button type="button" class="btn btn-danger">Ver Habitaciones   </button>
    </div>
</header>

<main>

    <section class="primary-content">

            <div class="row">
              <div class="col left-content">
                  <h2>Nuestras <br>
                      Habitaciones.</h2>

                    <p>
                        Todos nuestras habitaciones cuentan con servicios de primera calidad, construidas pensando en el detalle y la comodidad de los pasajeros desde el momento en que se despiertan hasta cuando se van a dormir.
                    </p>
                    <button type="button" class="btn btn-success">Ver Precios</button>
              </div>
              <div class="row row-cols-2 rigth-content">
                  <div class="col">
                    <div class="card" style="width: 18rem;">
                        <i class="fas fa-wifi"></i> 
                        <div class="card-body">
                            <h4>WI-FI GRATIS</h4>
                          <p class="card-text">Ofrecemos internet
                            en todas las habitaciones.</p>
                        </div>
                      </div>
                  </div>
                  <div class="col rigth-content">
                    <div class="card" style="width: 18rem;">
                        <i class="far fa-snowflake"></i>
                        <div class="card-body">
                            <H4>AIRE ACONDICIONADO</H4>
                          <p class="card-text">Todas nuestras habitaciones cuentan con equipo de AC.</p>
                        </div>
                      </div>
                  </div>
                  <div class="col rigth-content">
                    <div class="card" style="width: 18rem;">
                        <i class="fas fa-coffee"></i>
                        <div class="card-body">
                            <H4>DESAYUNO INCLUIDO</H4>
                          <p class="card-text">Empeza tu dia de la mejor manera con un desayuno Buffet.</p>
                        </div>
                      </div>
                  </div>
                  <div class="col rigth-content">
                    <div class="card" style="width: 18rem;">
                        <i class="fas fa-mountain"></i>
                        <div class="card-body">
                            <H4>INCREÍBLES VISTAS</H4>
                          <p class="card-text">Deleitate con nuestras exclusivas vistas.</p>
                        </div>
                      </div>
                  </div>
              </div>
            </div>
            <div class="row secondary-content">
                <div class="row left-secondary">
                    <img src="img/habitaciones1-min.JPG" alt="">
                </div> 
                <div class="row rigth-secondary">
                    <h2>Boutique</h2>
                    <p>Confort y descanso con <br>
                        vista a las montañas</p>
                        <button type="button" class="btn btn-outline-success">CONOCER HABITACIÓN
                        </button>
                </div> 
            </div>
            <div class="row secondary-content-two">
                <div class="row rigth-secondary">
                    <h2>Superior</h2>
                    <p>El lago como nunca lo viste antes. <br>
                        Desde nuestras habitaciones superiores.</p>
                        <button type="button" class="btn btn-outline-success">CONOCER HABITACIÓN
                        </button>
                </div>
                <div class="row left-secondary">
                    <img src="img/habitacion2-min.JPG" alt="">
                </div>  
            </div>
            <div class="servicios">
                <h2>
                    Los Servicios de la Posada
                </h2>
                <p>
                    At half-past eight the door opened, the policeman appeared, and, <br> 
                    requesting them to follow him, led the way to an adjoining hall.
                </p>
            </div>
            <div class="container main-services">
                <div class="row-services">
                  <div class="col-4">
                    <img src="img/parking.JPG" alt="estacionamiento">
                  </div>
                  <div class="col-4">
                    <img src="img/jacuzzi2.JPG" alt="jacuzzi">
                  </div>
                  <div class="col-4">
                    <img src="img/desayuno.JPG" alt="desayuno">
                  </div>
                </div>

                <div class="row-services second-row-services">
                  <div class="col-4">
                    <img src="img/deck.JPG" alt="deck">
                  </div>
                  <div class="col-4">
                    <img src="img/saloncomedor.JPG" alt="salon comedor">
                  </div>
                  <div class="col-4">
                    <img src="img/cocina.JPG" alt="cocina">
                  </div>
                </div>
            </div>
            <div class="review">
                <h2>No lo decimos nosotros…</h2>
                <p class="review-p">
                    Algunas de las opiniones que nos dejaron nuestros huspedes en diferentes plataformas online. <br> 
                    Estamos muy felices de recibirlos!
                </p>
                <div>
                    <h4>
                        “Un lugar fantástico para relajar y estar en contacto con la naturaleza. <br>
                         Marcela y Roberto, anfitriones de La Soñada, nos hicieron sentir como en casa. <br>
                          Sin dudas volveremos!”
                    </h4>
                </div>
                <div class="johnDoe">
                    <div>
                        <i class="fas fa-user"></i>
                        <h5>John Doe</h5>
                        <h5>MANAGER AT APPLE</h5>
                    </div>
                    <div>
                        <i class="fas fa-user"></i>
                        <h5>John Doe</h5>
                        <h5>MANAGER AT APPLE</h5>
                    </div>
                    <div>
                        <i class="fas fa-user"></i>
                        <h5>John Doe</h5>
                        <h5>MANAGER AT APPLE</h5>
                    </div>
                </div>
                <div class="booking">
                    <img src="img/logo-booking-com-png-logo-booking-com-myhotel-independent-guest-house-florence-tuscany-casa-del-pastore-gambassi-terme-italy-1875.png" alt="logo booking.com">
                    <h4>Tenemos la mejor Puntuación de Tafí</h4>
                </div>
            </div>
            <div class="marce-roberto">
                <h2>
                    Hola! Somos Marce y Roberto.
                </h2>
                <p>
                    Quienes después de desandar muchos caminos, hemos elegido como destino de excelencia, Tafi del Valle para vivir y compartir con nuestros huéspedes, quienes tendrán durante su estadía en la Posada, como compañeros inseparables, el descanso, el silencio, el canto de los pájaros, contemplando este maravilloso paisaje.
                </p>
            </div>
            <div id="ubication" class="ubication">
                <h2>
                    ¿Donde Estamos?
                </h2>
                <p>
                    Podes encontarnos siguiendo por la ruta hacia Amaicha , pasando la Quebradita. 
                </p>
            </div>
            <div class="maps">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3560.0100328651743!2d-65.70351548477217!3d-26.839633196624956!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94221c6fa584370b%3A0x40ade43383bfa42b!2sPosada%20La%20So%C3%B1ada!5e0!3m2!1ses!2sar!4v1585258655665!5m2!1ses!2sar" width="1440" height="360" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
            </div>

            <div id="contacto">
                <div class="container-contacto"> 
                    <form>
                        <h3>No seas tímido, hablemos.</h3>
                        <div class="row row-contacto">
                          <div class="col nombre">
                            <input type="text" class="form-control" placeholder="Nombre">
                          </div>
                          <div class="col nombre">
                            <input type="text" class="form-control" placeholder="Apellido">
                          </div>
                          <div class="col">
                            <input type="text" class="form-control consulta" placeholder="Dejanos tu consulta">
                          </div>
                          <button type="button" class="btn btn-danger btnConsulta">ENVIAR CONSULTA</button>
                        </div>
                    </form>
                </div>
                <div class="info">
                    <div>
                        <p>
                            DIRECCIÓN
                        </p> 
                    </div>
                    <div>
                        <h3>
                            La quebradita, Tafi del <br>
                             Valle, Tucumán.
                        </h3>
                    </div>
                    <div class="telephone">
                        <p>
                            TELEFONO
                        </p> 
                    </div>
                    <div>
                        <h3>
                            309-736-5477
                        </h3>
                    </div>
                    <div class="telephone">
                        <p>
                            MAIL
                        </p> 
                    </div>
                    <div>
                        <h3>
                            posadalasoniada@gmail.com
                        </h3>
                    </div>
                </div>
            </div>

    </section>


    <section>
        <footer class="">
            <div class="container text-white">
              <br>
              <div class="row footer">
                <div class="col-12 col-md-4 col-lg-2">
                  <h4>Facebook</h4>
                  <p><i class="fab fa-facebook"></i> <a href="#">/usuario</a></p>
                </div>
            </div>
          </footer>
    </section>


</main>



















<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">

</script>

</body> </html>

//////////////////// CSS //////////////////////

/* Base Styles -------------------- */

  • { box-sizing: border-box; }

body { text-rendering: optimizeLegibility; margin: auto; max-width: auto; font-family: 'Poppins', sans-serif, Helvetica, Arial; height: auto; }

/* Navbar Styles -------------------- */

navbarNavAltMarkup{

flex-direction: row-reverse;

}

/* Main Styles --------------------- */

.main-header { padding-top: 170px; height: 850px; background: linear-gradient(#58ACFA, transparent 20%), linear-gradient(to top, rgba(255,102,0,0.4), transparent 19%), #FFBF00 url('img/headerImg.JPG') no-repeat center; background-size: cover; color: white; padding-left: 100px; font-weight: 600; }

.main-header h1{ margin-bottom: 50px; font-size: 52px; } .main-header h3{ margin-bottom: 60px; font-size: 28px; font-weight: 600; }

/* Main Section --------------------- */

.row{ margin: 0; }

/* Primary-Content --------------------- */

.primary-content{ height: 405px; }

.primary-content .left-content h2{ text-align: left; } .left-content{ max-width: 50%; margin-left: 20px; }

.left-content h2{ margin-top: 30px; margin-bottom: 30px; font-size: 41px; }

.left-content p{ margin-bottom: 30px; letter-spacing: 1px; width: 470px; text-align: left; } .rigth-content{ max-width: 50%; }

.left-content .btn-success{ background-color: #547E28; border-color: #547E28; border-radius: 4px; width: 229px; margin-top: 50px; text-transform: uppercase; }

.left-content .btn-success:hover{ background-color: white; color: #547E28; }

.rigth-content .fa-wifi, .fa-snowflake, .fa-coffee, .fa-mountain{ font-size: 25px; text-align: left; color: #03A67B; margin-top: 30px; padding-left: 20px;

/* margin-top: 30px; */

}

.rigth-content .fa-wifi, .fa-snowflake, .fa-coffee, .fa-mountain h4 p{ font-size: 25px; }

.card h4 , p{ text-align: left; }

.rigth-content .card{ border: none; text-align: left; /* display: flex; */ }

.row-cols-2{ display: flex; max-width: 50%; padding-left: 20px; }

/* Secondary-Content 1st row --------------------- */

.secondary-content{ margin-top: 30px; width: 100%; } .left-secondary{ height: 490px; width: 50%; }

.secondary-content img{ width: 100%; }

.rigth-secondary{ width: 50%; height: 490px; position: relative; }

.rigth-secondary h2{ position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; }

.rigth-secondary p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); width: 100%; text-align: center; }

.rigth-secondary button{ position: absolute; top: 75%; left: 50%; transform: translate(-50%, -60%); width: 220px; color:#547E28; border-color: #547E28; text-align: center; } .rigth-secondary button:hover{ background-color: #547E28; border-color: #547E28; }

/* Secondary-Content 2nd row --------------------- */

.secondary-content-two{ margin-top: 5px; width: 100%; } .secondary-content-two img{ width: 100%; }

/* Secondary-Content 3rd row --------------------- */

.servicios h2{ font-size: 45px; font-weight: 600; color: #333333; text-align: center; margin-top: 85px; }

.servicios p{ text-align: center; }

.container{ width: 1200px; height: 590px; margin-left: 150px; }

.main-services img{ width: 350px; height: 250px; object-fit: cover; max-width:600px; padding: 5px; }

.row-services{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 35px;

}

.second-row-services{ margin-top: -65px; }

.main-services img:hover{

    width: 650px;
    height: 350px;

/* Secondary-Content 4th row --------------------- */

.review { height: 767px; background-color: rgba(29,149,255,0.2); padding-top: 50px;

}

.review h2, h4{ text-align: center; }

.review h2{ font-size: 44px; font-weight: 600; }

.review h4{ margin-top: 5px; font-size: 32px; font-weight: 600; line-height: 49px; }

.review .review-p{ line-height: 29px; text-align: center; }

.johnDoe{ display: flex; justify-content: space-evenly; margin-top: 70px; } .johnDoe div{ margin-right: 90px; text-align: center; }

.johnDoe .fa-user{ font-size: 50px; color: #1D95FF; padding-bottom: 20px; }

.booking img{ position: relative; top: 50%; left: 39%; width: 291px; }

.booking h4{ color: #23387E; } /* Secondary-Content 5th row Marce y Papi --------------------- */

.marce-roberto{ width: 100%; height: 400px; background: url(img/marce-papi2.JPG); background-repeat: no-repeat; background-size: cover;
background-position: end; padding-top: 25px;

}

.marce-roberto h2{ font-size: 36px; font-weight: 600; color: #FFFFFF; padding-top: 40px; padding-left: 5px; text-align: left; }

.marce-roberto p{ width: 30%; padding-left: 5px; padding-top: 40px; font-weight: 400; color: white; text-align: left; }

/* Secondary-Content 6th Ubication --------------------- */

.ubication{ height: 200px; width: 100%; }

ubication h2{

font-size: 36px;
font-weight: 600;
padding-top: 55px;

}

.ubication p{ font-weight: 400; }

ubication p, h2{

text-align: center;

}

/* Secondary-Content contacto --------------------- */

contacto{

width: 100%;
height: 700px;
background: linear-gradient(#ffa949, transparent 19%),
            linear-gradient(0deg, #0A4488, transparent ),
            #ffa949 url('img/footer.JPG') no-repeat center;
background-size: cover;
color: white;
padding-top: 50px;
padding-left: 201px;
position: absolute;

}

contacto .container-contacto{

background: rgba(10,68,136,0.5);
width: 450px;

}

contacto .container-contacto .nombre{

width: 100%;
/* padding-bottom: 30px; */

}

contacto .container-contacto .col{

flex-basis: auto;

}

contacto .container-contacto h3{

align-items: center;
padding-left: 29px;
padding-top: 50px;
padding-bottom: 30px;
font-size: 29px;
font-weight: 600;

}

/* #contacto .container-contacto .consulta{ height: 100px; text-align: center; } */

.row-contacto{ height: 450px; }

.btnConsulta{ width: 250px; height: 50px; border-radius: 5px; background-color: #FC3A1B; color: white; margin-left: 95px; }

.form-control{ height: 70px; }

.info{ position: relative; top: -370px; left: 700px; text-transform: uppercase; font-weight: 600; max-width: 500px; width: auto; }

h3.info{ padding-top: 5px; font-size: 36px; }

.telephone{ margin-top: 27px; }

/* Footer --------------------- */

.footer { display: flex; position: fixed; left: 0; bottom: 0; width: 100%; height: 95px; color: white; text-align: center; background-color: #333333; }

.footer.navbar{ display: inline-block; }

Steven Parker
Steven Parker
187,496 Points

Instead of posting so much code (and all without formatting!), please make a snapshot of your workspace and post just the link to it here. That will make it simple to replicate your issue and work with it, plus it will contain all the images.

Federico Lemaire
PRO
Federico Lemaire
Pro Student 4,099 Points

So sorry Steven, my bad, don't get mad on me, I didn't know that I can make a snapshot when I want.

Let me know if is alright now

https://w.trhou.se/94veo1eofj

Sorry 🙏

Steven Parker
Steven Parker
187,496 Points

Much better. See the comment added to my original answer.

Federico Lemaire
PRO
Federico Lemaire
Pro Student 4,099 Points

Thank you much Steven! It works perfectly, I appreciate your patience and your time :)