hover

Status
Niet open voor verdere reacties.
B

baukjen

Gebruiker
Lid geworden
14 sep 2006
Berichten
275
Hoe kan ik een img een hover geven die er voor zorg bij muis over dat de img als het ware naar voren komt?

de img die ik nu heb is gemaakt met html en css.

hr.gr.
Baukjen

Bekijk bijlage 266337
 
Hoi Baukjen, zoiets misschien?

Code: 
<a href="..." class="imgbtn">
<img src="hover.jpg" alt="" />
</a>

.imgbtn,
.imgbtn:hover,
.imgbtn:active,
.imgbtn img {
    display: block;
    box-sizing: border-box;
    text-decoration: none;
    margin: 0;
    padding: 0;
    border: 0;
}
.imgbtn {
    padding: 20px;
    margin-bottom: 0;
    transition: padding ease-in-out .3s, margin ease-in-out .3s;
}
.imgbtn:hover,
.imgbtn:active {
    padding: 0;
    margin-bottom: 20px;
    transition: padding ease-in-out .3s, margin ease-in-out .3s;
}
.imgbtn img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

Je kunt in plaats van <a ...> natuurlijk ook <div ...> gebruiken.

Suc6.
 
Hi bron, bedankt voor de reactie. Ik heb e.e.a. trachten te gebruiken helaas nog zonder resultaat. Waarschijnlijk zie ik iets over het hoofd.
Zoals ik heb nu is de tekst die een hover krijgt. Die zou moeten vervallen.
Heb je misschien een advies?

Hr.gr.
Baukjen

dit heb ik aan css
/* unvisited link */
a.hexagonlink:link {
color: #ffffff;
font-size: 18px;
font-style: inherit;
font-weight: normal;
}

/* mouse over link */
a.hexagonlink:hover {
font-size: 28px;
font-weight: bold;
}

a.hexagonlinkblack:link {
color: #000000;
font-size: 18px;
font-style: inherit;
font-weight: normal;
}

dit aan html
<div class="rood"><span class="hexagon-wrapper"><a href="#" class="hexagonlink">rood</a></span></div>
<div class="oranje"><span class="hexagon-wrapper"><a href="#" class="hexagonlink">oranje</a></span></div>
 
Dit zou in jouw code de html aanpassing zijn
Code: 
<div class="rood">
<span class="imgbtn hexagon-wrapper">
<a href="#" class="hexagonlink">
<img src="hover1.jpg" alt="" />
</a>
</span>
</div>
<div class="oranje">
<span class="imgbtn hexagon-wrapper">
<a href="#" class="hexagonlink">
<img src="hover2.jpg" alt="" />
</a>
</span>
</div>
Hier ga ik er vanuit dat je div.rood en div.oranje een afmeting hebt gegeven en dat je bij deze 2 div's al hebt bepaald of ze boven elkaar of naast elkaar komen. Als bijlage de hover plaatjes die ik wat bijgesneden hebt.

Suc6.
 

Bijlagen

  • hover1.jpg
    hover1.jpg
    16,4 KB · Weergaven: 41
  • hover2.jpg
    hover2.jpg
    16,5 KB · Weergaven: 40
Laatst bewerkt:
bedankt ik zal zo uittesten of dit is wat ik bedoel

groet
Baukjen
:)
 
Nog iets netter is
<a href="#" class="imgbtn hexagonlink">
en dan imgbtn bij span weghalen. Voor de werking maakt het verder niet uit.
 
Goedendag, bedankt voor alle informatie. Het werkt nog niet en waarschijnlijk komt dit omdat het geen IMG afbeeldingen zijn maar een plaatje wat is opgebouwd uit HTML. Niet helemaal juist in mijn eertste bericht geschreven

Hr.gr.
Baukjen
:confused:
 
Laatst bewerkt:
Er zijn voor zover ik weet 3 manieren om een hexagon in css te maken, met border, calc of rotate, maar bij alle 3 is er behoorlijk veel css nodig en als je een responsive website hebt (weet ik niet) dan is het nog lastiger.
 
Op zich heb ik de hexagon aan de praat. En ook een hover voor de tekst die er in staat. Mooi zou zijn als de hele hexagon een hover heeft.

Bekijk bijlage 266493

Hr.gr.
Baukjen
 
Iets anders maar misschien kan je er iets mee
Code: 
HTML

<div class="hexagon">
  <div class="row1">
    <a href="#" class="hglink rood">Rood</a>
    <a href="#" class="hglink oranje">Oranje</a>
  </div>
  <div class="row2">
    <a href="#" class="hglink geel">Geel</a>
    <a href="#" class="hglink blauw">Blauw</a>
  </div>
</div>

CSS

/* container */
.hexagon,
.hexagon * {
  box-sizing: border-box;
}
.hexagon {
  position: relative;
  width: 450px;
  height: 360px;
  background-color: #fff;
}
/* row */
.row1, .row2 {
  position: absolute;
  clear: left;
}
.row2 {
  top: 150px;
  left: 90px;
}
/* linkje */
.hglink,
.hglink:hover {
  float: left;
  display: block;
  position: relative;
  text-decoration: none;
  text-align: center;
  line-height: 1;
  color: #fff;
}
.hglink {
  width: 150px;
  height: 87px;
  margin: 58px 15px 58px 15px;
  font-size: 15px;
  padding-top: 40px;
}
.hglink:before,
.hglink:after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  background-color: transparent;
}
.hglink:before {
  bottom: 100%;
}
.hglink:after {
  top: 100%;
}
/* kleuren */
.hglink.rood {background-color: #f00}
.hglink.rood:before {border-bottom: 43px solid #f00}
.hglink.rood:after {border-top: 43px solid #f00}
.hglink.oranje {background-color: #f80}
.hglink.oranje:before {border-bottom: 43px solid #f80}
.hglink.oranje:after {border-top: 43px solid #f80}
.hglink.geel {background-color: #ee0}
.hglink.geel:before {border-bottom: 43px solid #ee0}
.hglink.geel:after {border-top: 43px solid #ee0}
.hglink.blauw {background-color: #33f}
.hglink.blauw:before {border-bottom: 43px solid #33f}
.hglink.blauw:after {border-top: 43px solid #33f}
/* hover */
.hglink:hover {
  width: 180px;
  height: 104px;
  margin: 52px 0 52px 0;
  font-size: 18px;
  padding-top: 45px;
}
.hglink:hover:before,
.hglink:hover:after {
  border-left-width: 90px;
  border-right-width: 90px;
}
.hglink:hover:before {
  border-bottom-width: 52px;
}
.hglink:hover:after {
  border-top-width: 52px;
}

Suc6.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan