CODEWITHSUNDEEP
htmlcss
ireneec
ireneec

Reputation: 13

How to have text appear after the mouse hovers over it?

I was wondering how I could make text appear when the mouse hovers over that area. However, I do not want the text to appear before that.

Currently, I have the boxes created to be like buttons. I was wondering if there was a better way to do code it.

I have attached the current picture and what I would like. (Sorry for the bad pictures!)

Thank you!

Current: Before Hover (Current): https://i.sstatic.net/iDEg1.jpg After Hover (Current): https://i.sstatic.net/MwOrZ.jpg

What I want: Before Hover (What I want):https://i.sstatic.net/Omtlm.jpg After Hover (What I want):https://i.sstatic.net/6P2x9.jpg

HTML: 

<div class="sections">
  <section id="section_a" class="content-block" data-column-mode-sm="single" data-column-mode-xs="single"></section>
  <section id="section_b" class="content-block" data-column-mode-sm="single" data-column-mode-xs"single">
  <div class="container">
    <div id="row_1" class="row">
      <div id="column_a" class="column" data-xl-width="12">
        <div class="content-wrapper">
          <div id="content_1" class="column-content" data-module="portfoliogrid">
            <div id="masonry-content" class="masonry" style="position: relative; height: 506.25px;">
              <div class="masonry-item-width"></div>

              <!-- Project 1 -->
              <div id="project1" class="button button1" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:0%; top: 0%; opacity:1;">Typography</div>

              <!-- Project 2 -->
              <div id="project2" class="button button2" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:49.8664%; top: 0%; opacity:1;">Colour, Visual Language</div>

              <!-- Project 3 -->
              <div id="project1" class="button button3" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:0%; top: 253px; opacity:1;">UI/UX Case Study</div>

              <!-- Project 4 -->
              <div id="project2" class="button button4" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:49.8664%; top: 253px; opacity:1;">Display Work</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </section>
</div>

CSS:

.button {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 150px 200px;
  position: flex;
  font-family: 'Yantramanav', sans-serif;
  text-align: center;
  text-decoration: none;
  letter-spacing: 1.5px;
  font-size: 15px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 4px;
}

.button1 {
  background-color: #087084;
}

.button1:hover {
  background-color: #56b1bf;
  color: white;
}

Upvotes: 0

Views: 537

Answers (2)

benvc
benvc

Reputation: 15120

Lots of ways to get what you want. Here is one simple html / css example:

div {
  background-color: #087084;
  padding: 50px;
}

div:hover {
  background-color: #56B1Bf;
}

span {
  visibility: hidden;
}

div:hover span {
  visibility: visible;
}
<div><span>Text</span></div>

Upvotes: 3

Emerson Rubio
Emerson Rubio

Reputation: 3

You could have a function run when mouse hovers over and mouse leaves. You could add it to all four divs. Note that I changed the ids for the Divs since all ids should be unique.

function changeText(e, text) {
  e.innerHTML = text;
}
<div class="sections">
  <section id="section_a" class="content-block" data-column-mode-sm="single" data-column-mode-xs="single"></section>
  <section id="section_b" class="content-block" data-column-mode-sm="single" data-column-mode-xs "single">
    <div class="container">
      <div id="row_1" class="row">
        <div id="column_a" class="column" data-xl-width="12">
          <div class="content-wrapper">
            <div id="content_1" class="column-content" data-module="portfoliogrid">
              <div id="masonry-content" class="masonry" style="position: relative; height: 506.25px;">

                <div class="masonry-item-width"></div>
                <!-- Project 1 -->

                <div id="project1" class="button button1" data-xl-width="6" data-sm-width="6" data-xs-width="12" onmouseover="changeText(this, 'Typography')" onmouseleave="changeText(this, 'Default Text')" style="position:absolute; left:0%; top: 0%; opacity:1;">zz</div>
                <!-- Project 2 -->
                <div id="project2" class="button button2" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:49.8664%; top: 0%; opacity:1;">Colour, Visual Language</div>
                <!-- Project 3 -->
                <div id="project3" class="button button3" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:0%; top: 253px; opacity:1;">UI/UX Case Study</div>
                <!-- Project 4 -->
                <div id="project4" class="button button4" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:49.8664%; top: 253px; opacity:1;">Display Work</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

Upvotes: 0

Related Questions