CODEWITHSUNDEEP
javascripthtmlcss
Caleb Erickson
Caleb Erickson

Reputation: 11

How do I add a mouseover event to an image

I am trying to create a mouseover event that would turn my images background to black while adding text that would describe the link to another web-page. But everything that I have tried either in CSS or JavaScript does not work and I get errors, not sure how to fix the problem?

var one = document.getElementById("one");
addEventListner("mouseover", link);
addEventListner("mouseout", linkOut);

function link() {
  one.style.backgroundColor = "black";
  one.textContent = "Our Games";
  one.style.textAlign = "center";
  one.style.verticalAlign = "middle";
}

function linkOut() {
  one.style.backgroundColor = "";
  one.textContent = "";
}
This is my my CSS, I think that the overlay option is not working 
do to the grid that I have set up for my images. But I am 
not quit sure why it wont work.

#dragon {
	height: 200px;
}
#chaos {
	height: 600px;
}
#logo {
	height: 150px;
}
#thunder {
	height: 600px;
}
#dice {
	height: 235px;
}
h1	{
	color: white;
	text-align: center;
  	padding: 32px;
  	padding-bottom: 0px;
}

/*--------------grid for my images--------------------------*/
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	background-color: black;
}
.row {
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
}
.column {
	-ms-flex: 33.33%;
	flex: 33.33%;
	max-width: 33.33%;
	padding: 0 4px;
}
.column img {
	margin-top: 8px;
	vertical-align: middle;
	width: 100%;
}
/*--------------overlay for links--------------------------*/


.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.column:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
This is my HTML


<div class="row">

  <div class="column">
    <a id="one" href="#"><img id="chaos" src="cardchaos.jpg" alt=""></a>
  </div>

  <div class="column">
    <a id="two" href="#"><img id="dragon" src="dragon card.gif" alt=""></a>
    <a href="#"><img id="logo" src="logo.png" alt=""></a>
    <a id="three" href="#"><img id="dice" src="Img Try Again.jpg" alt=""></a>
  </div>

  <div class="column">
    <a id="four" href="#"><img id="thunder" src="Thunder Bolt.jpg" alt=""></a>
  </div>

  </div>

Upvotes: 0

Views: 255

Answers (1)

Shnigi
Shnigi

Reputation: 1012

You have a typo in your script. Also what you are trying to do is that you edit the element directly. If you try to remove the textcontent of the element on mouseleave you will lose the original element as well. I recommend doing this with css.

<div class="container">
  <img src="https://images.unsplash.com/photo-1529981188441-8a2e6fe30103?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div> 

.container {
  position: relative;
  width: 300px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

Have a look of my example and then underneath I fixed your version what is happening. https://codepen.io/shnigi/pen/pojQxNB

Upvotes: 1

Related Questions