Hide and show on hover

In this example below you will see how to do a Hide and show on hover with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mush_el, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mush_el ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Hide and show on hover</title>
  
  
  <link rel='stylesheet prefetch' href='http://hacienda.djnicerack.com/css/skeleton.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
     <h1>Hide/Show ON HOVER</h1>

  <div class="row">
    <div class="four columns">
      <img src="" class="villa u-max-full-width" title="Hacienda Villa" >     
    </div>
    <div class="four columns">
      <img src="" class="maison u-max-full-width" title="Hacienda maison" ></div>
    <div class="four columns">
      <img src="" class="studio u-max-full-width" title="Hacienda Studio" >
    </div>
  </div>

<div class="row">
	<div id="villa_details">
		<div class="four columns"></div>
		<div class="eight columns">
			<p>Meet the Hacienda Villa, an intentional community located in Bushwick, Brooklyn. By living and working together in a cohesive way, the "Villans" role model the benefits of our sex-positive culture to a mainstream audience.
<br>			
Hacienda Villa has been named one of the "Reasons to Love New York" by New York Magazine, and has been featured in The Huffington Post, BUST, Frankfurter Allgemeine Zeitung, Time Out New York, Gothamist, The New York Daily News, The New York Post, Bustle, as well as on CBS News, The Young Turks Network, and BRIC TV.</p>
		</div>
	</div>
	<div id="maison_details">
		<div class="four columns"></div>
		<div class="eight columns">
			<p>Welcome to the Hacienda Maison, a meticulously restored 4,500 square foot sex-positive guesthouse and retreat in New Orleans, Louisiana. The Maison offers a resort-like atmosphere with an outdoor grotto, a swimming pool and hot tub, multiple kitchens, bedrooms and bathrooms, and multi-media capabilities. It has become a popular location for educational seminars, retreats, industry parties, and film shoots. Hacienda Maison has hosted events such as Kinky Salon and Back to the Body, as well as our own Hacienda-branded experiences.
	<br>
	Book your stay at this decadent historic home offering bright &amp; spacious rooms.</p>
				<a href="https://www.airbnb.com/rooms/7821044">
					<button class="button-primary">Book This House</button>
				</a>
		</div>
	</div>
	<div id="studio_details">	
		<div class="four columns"></div>
		<div class="eight columns">
			<p>The Hacienda Studio is Brooklyn's sexiest home for classes, trainings, and workshops in communication, sexual health, BDSM, kink, and polyamory. We are a sex positive venue. Hacienda partners with the world's leading sex educators and relationship experts to host workshops, seminars, social gatherings, and other events that bring our community together.
	<br>
	Join us for a class, browse our library of videos, or host an event with us!</p>
		</div>
	</div>
</div>



</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mush_el/hide-and-show-on-hover-NpzJqo */
body {
  background: #301147;
  color: #fff;
  margin: 20px;
  height: 100vh;
}
hr {
  border: 2px solid #331446;
}
.villa,
.maison,
.studio {
  cursor: pointer;
}
#villa_details,
#maison_details,
#studio_details {
  display: none;
  clear: both;
}


/*Downloaded from https://www.codeseek.co/mush_el/hide-and-show-on-hover-NpzJqo */
$(".villa").click(function() {
  $("#villa_details").toggle("slow");
})
$(".maison").click(function() {
  $("#maison_details").toggle("slow");
})
$(".studio").click(function() {
  $("#studio_details").toggle("slow");
})

Comments