Text on Shape to Diff. Text upon Hover

Question

I've definitely never identified myself as a coder, which is why I need some help. I've tried & tried to get a grid of shapes with text overlayed to change to different text whenever the mouse is hovering over it - completely different text. I looked up before & after properties but still can't get it right because of the "grid" css.

I'm hoping to have "name" on the normal shape, and then other text on the hovered shape for more information. How would I go about doing this? I've supplied a fiddle to show everything.

http://jsfiddle.net/6c4v2ypv/3/

Thank you all tremendously for your help.

CSS

    .grid {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
}

.grid::after {
  content: "";
  display: block;
  clear: both;
}

.grid-item {
  width: 21.833%;
  padding-bottom: 21.833%;
  overflow: hidden;
  float: left;
  background: #BBB;
  transform: rotate(45deg);
  margin: 5.5%;
  margin-top: -11%;
}

.grid-item:nth-child(1),
.grid-item:nth-child(2),
.grid-item:nth-child(3) {
  margin-top: 5%;
}

.grid-item:nth-child(5n+4) {
  margin-left: 21.9%;
}

.grid-item:nth-child(5n+6) {
  clear: left;
}

.grid-item:nth-child(5n+6):last-of-type {
  margin-left: 38.25%;
}

.grid-item:hover {
  background: #000;
}

.grid-inner {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
  text-align: center;
  padding-top: 40%;
  font-size: 1em;
}

.grid-inner:hover a span {
  display: none;
}

.grid-inner:hover:after {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
  text-align: center;
  padding-top: 40%;
  font-size: 1em;
  background-color: black;
}

score 1 · Accepted Answer · answered Sep 03 '17 at 17:51

Maybe so?

.grid {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
}

.grid::after {
  content: "";
  display: block;
  clear: both;
}

.grid-item {
  width: 21.833%;
  padding-bottom: 21.833%;
  overflow: hidden;
  float: left;
  background: #BBB;
  transform: rotate(45deg);
  margin: 5.5%;
  margin-top: -11%;
}

.grid-item:nth-child(1),
.grid-item:nth-child(2),
.grid-item:nth-child(3) {
  margin-top: 5%;
}

.grid-item:nth-child(5n+4) {
  margin-left: 21.9%;
}

.grid-item:nth-child(5n+6) {
  clear: left;
}

.grid-item:nth-child(5n+6):last-of-type {
  margin-left: 38.25%;
}

.grid-item:hover {
  background: #000;
}

.grid-inner {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
  text-align: center;
  padding-top: 40%;
  font-size: 1em;
}

.grid-inner:hover a span {
  display: none;
}

.grid-inner:hover:after {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
  text-align: center;
  padding-top: 40%;
  font-size: 1em;
  background-color: black;
}

.grid-inner-hover {
  opacity: 0;
}

.grid-item:hover .grid-inner-hover {
  opacity: 1;
  color: #fff;
}

<div class="grid">
  <div class="grid-item">
    <div class="grid-inner">Name 1</div>
    <div class="grid-inner grid-inner-hover">Name 1 Hover</div>
  </div>
  <div class="grid-item">
    <div class="grid-inner">Name 2</div>
    <div class="grid-inner grid-inner-hover">Name 2 Hover</div>
  </div>
  <div class="grid-item">
    <div class="grid-inner">Name 3</div>
    <div class="grid-inner grid-inner-hover">Name 3 Hover</div>
  </div>
  <div class="grid-item">
    <div class="grid-inner">Name 4</div>
    <div class="grid-inner grid-inner-hover">Name 4 Hover</div>
  </div>
  <div class="grid-item">
    <div class="grid-inner">Name 5</div>
    <div class="grid-inner grid-inner-hover">Name 5 Hover</div>
  </div>
  <div class="grid-item">
    <div class="grid-inner">Name 6</div>
    <div class="grid-inner grid-inner-hover">Name 6 Hover</div>
  </div>
</div>

DCR · Answer 2 · 2017-09-03T18:13:34.163

0

here's a simple example:

.item1:hover span, .item2:hover span{
  display: none;
}
.item1:hover:after{
  content: 'ADD';
}

.item2:hover:after{
  content: 'Subtract';
}

<div class="item1">    
        <span >first</span>
</div>

<div class="item2">    
        <span>second</span>
</div>

edited Sep 03 '17 at 18:13

answered Sep 03 '17 at 17:38

DCR

14,737
12
52
115

Thanks DCR, I saw that example before as I was looking for answers but it doesn't seem to work. I'm trying to add multiple "new" texts upon hover for each shape. Do I need to change "div class='item' to accomodate the "grid-item" ? Also unsure about the grid-item VS grid-inner – Francis Gildart Sep 03 '17 at 17:48

score 0 · Answer 3 · answered Sep 03 '17 at 19:14

0

You can also add something like this in your css:

.grid-inner:hover:after{
  content:'hello';
  color:#fff;
  transform:rotate(0deg);
}

http://jsfiddle.net/6c4v2ypv/5/

answered Sep 03 '17 at 19:14

bhansa

7,282
3
30
55

Text on Shape to Diff. Text upon Hover

3 Answers3