CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Azizul
Azizul

Reputation: 124

how to extend background color when i hover

I'm working with bootstrap panel. PSD suggest that when I hover over a panel background color and content color will change. that's fine I can do that. but how to extend hover-color in top and bottom? and content position should stay there!

panel

<div class="row">
  <div class="col-md-4">
    <div class="panel">

    </div>
  </div>
</div>

.panel:hover{
  background-color: #13BDFF;
}

Upvotes: 1

Views: 1192

Answers (3)

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14012

Update

Just use outline CSS property which has excellent browser support (IE8+). Demo:

.panel:hover {
  background-color: #13BDFF;
  outline: 5px solid #13BDFF;
}

/* just styles for demo */
.panel {
  padding: 10px;
  background-color: lime;
}
<div class="panel">
  This is panel
</div>

Original answer (not recommended way)

You can use transparent borders (also padding can help you with this) and negative margin for this:

.panel:hover {
  background-color: #13BDFF;
  border: 5px solid transparent;
  margin-left: -5px;
  margin-top: -5px;
}

/* just styles for demo */
.panel {
  padding: 10px;
  background-color: lime;
}
<div class="panel">
  This is panel
</div>

Upvotes: 4

snehgin
snehgin

Reputation: 211

Changing the border color and size might solve the issue. please refer the sample fiddle :

.panel:hover{
  background-color: #13BDFF;
  border-color : #13BDFF;
  border:10px solid #13BDFF;
}

https://jsfiddle.net/3wkjuzbk/1/

Upvotes: 0

Chun Yin
Chun Yin

Reputation: 290

https://jsfiddle.net/xkqvv92p/

Here's a version using padding on hover.

.rowArea {
  height: 400px;
  background-color: red;
  display: flex;
  align-items: center;
}

#container {
  margin: auto;
  width: 200px;
  height: 300px;
  background-color: white;
  border-radius: 5px;
  padding: 5px;
}

#container:hover {
  padding: 30px 5px;
  background-color: #13C3FF;
}
<div class="rowArea">
  <div id="container">hi</div>
  <div id="container">hi2</div>
</div>

Upvotes: 0

Related Questions