Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Federico Lemaire
8,423 PointsHi 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
231,153 PointsIf 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;
}
Federico Lemaire
8,423 PointsHi 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
231,153 PointsI 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
8,423 PointsHi 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
231,153 PointsInstead 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
8,423 PointsSo 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
Sorry 🙏
Steven Parker
231,153 PointsMuch better. See the comment added to my original answer.
Federico Lemaire
8,423 PointsThank you much Steven! It works perfectly, I appreciate your patience and your time :)
Steven Parker
231,153 PointsSteven Parker
231,153 PointsHere is some recommended CSS after seeing the workspace snapshot: