Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

Hoe kan ik een mouse over invoegen in mijn Html en Css

bewerkt ma 10 nov 2014 in XHTML, XML Posts: 24
Ik ben een week of 3 geleden begonnen met het bouwen van een website dmv html en css. Nu bestaat de homepage uit verschillen de foto's waarvan enkele bij mouse over duidelijk aanklikbaar moeten zijn en ook aan moeten geven waar de link naar toe gaat, zoals bij http://tympanus.net/codrops/2013/06/18/caption-hover-effects/: effect 2. Nu heb volgens mij de gegevens ingevoegd zoals ik denk dat dat zou moeten , maar er gebeurd weinig. het enige dat er gebeurd is dat het verband uit de foto opstelling is en dat de teksten continue in beeld zijn. ( de foto met het @ teken is de enige van de 4 foto's waar ik alle gegevens helemaal heb ingegeven, vandaar dat deze er anders uit ziet dan de andere 3.

Mijn Html bestand ziet er als volgt uit:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Main-site. All about e-motion</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="default.hover.css" />
<link rel="stylesheet" type="text/css" href="component.hover.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<header class="row-fullscreen">
<div class="col-full columns">
<div class="row">
<nav class="main-menu col-full columns">
<ul>
<li>Home</li>
<li>Over Ons</li>
<li>Portfolio</li>
<li>Impressies</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<content>
<div id="main" class="row">
<div class="col-one-third columns">
<div class="row">
<div class="col-full columns">
<img src="Foto_groot_logo.jpg" alt="Main-site">
</div>
</div>
<div class="row">
<div class="col-half columns">
<img src="Foto_indruk.jpg" alt="indrukken">
</div>
<div class="col-half columns">
<img src="120.000_indrukken.jpg" alt="120.000 indrukken">
</div>
</div>
<div class="row">
<div class="col-full columns">
<ul class="grid cs-style-1">
<li>
<figure>
<img src="Foto_contact.jpg" alt="contact">
<figcaption>
<h3>Camera</h3>
<span>Peter Steintjes</span>
<a href="#" class="info"></a>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>
</div>
<div class="col-one-third columns">
<div class="row">
<div class="col-half columns">
<img src="Foto_gedachten.jpg" alt="Gedachten">
</div>
<div class="col-half columns">
<img src="60.000_gedachten.jpg" alt="60.000 gedachten">
</div>
</div>
<div class="row">
<div class="col-full columns">
<div class="view animation-one">
<img src="Foto_groot_over_ons.jpg" alt="Over ons">
<div class="mask">
<h2>Over ons</h2>
<p></p>
<a href="#" class="info"></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-full columns">
<div class="view animation-one">
<img src="Foto_impressies.jpg" alt="Impressies">
<div class="mask">
<h2>Impressies</h2>
<p></p>
<a href="#" class="info"></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-one-third columns">
<div class="row">
<div class="col-full columns">
<div class="view animation-one">
<img src="Foto_groot_portfolio.jpg" alt="portfolio">
<div class="mask">
<h2>Portfolio</h2>
<p></p>
<a href="#" class="info">test</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-full columns">
<img src="Foto_aarde.jpg" alt="Aarde">
</div>
</div>
<div class="row">
<div class="col-full columns">
<img src="Wij_zorgen......jpg" alt="Wij zorgen">
</div>
</div>
</div>
</div>
</content>
<div id="footer" class="row">
<div class="col-one-half columns">
<div class="row">
<div class="article column1">
<a href="https://www.facebook.com/peter.steintjes.5"; target="_blank"><img src="Logo_facebook.jpg" alt="Facebook" /></a>
<a href="http://www.facebook.com/sharer.php?u=http://www.simplesharebuttons.com"; target="_blank"><img src="Logo_Google+.jpg" alt="Facebook" /></a>
<a href="http://www.facebook.com/sharer.php?u=http://www.simplesharebuttons.com"; target="_blank"><img src="Logo_Twitter.jpg" alt="Facebook" /></a>
</div>
</div>
</div>
<div class="col-one-half columns">
<div class="row">
<div class="article column2">
Copyright &copy; 2014 Main-site
</div>
</div>
</div>
</div>
<script src="js/toucheffects.js"></script>
</body>
</html>

en mijn css bestanden:

/***
TABLE OF CONTENTS:
--------

01 - Normalize.css v3.0.2 (include)
02 - Typography
03 - Elements
04 - Grid
05 - Forms
06 - Structure

--------
***/

/*
* Typography
*/
body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

input,
button {
-webkit-font-smoothing: antialiased;
}

html {
font-size: 100%;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.250em; }
h4 { font-size: 1.125em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; }
h1, h2, h3, h4, h5, h6 {
margin: 0.5rem 0 0.875rem;
font-weight: bold;
line-height: 1.2;
}
h6 { font-weight: normal; }

p {
margin: 0 0 1.5em;
line-height: 1.5;
}
p {
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
}

a,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}

em {
font-style: italic;
}

img {
max-width: 100%;
height: auto;
}




*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.row {
margin: 0 auto;
padding-top: 0;
max-width: 1044px;
width: 100%;
}
.row-fullscreen {
margin: 0;
padding: 0;
width: 100%;
}
.row:before,
.row:after,
.row-fullscreen:before,
.row-fullscreen:after {
display: table;
content: "";
}
.row:after,
.row-fullscreen:after { clear: both; }

.columns {
display: inline-block;
float: left;
}
.columns:last-child {
float: right;
}

.row.table .columns {
display: table-cell;
float: none;
}

.col-one-third { width: 33.33334%; }
.col-half { width: 50%; }
.col-full { width: 100%;}

#main.row .row .col-half.columns,
#main.row .row .col-full.columns {
padding: 0.250rem;
line-height: 0;
}

body {
background-image: url(Achtergrond_home_trap.jpg);
font-family: Heiti SC;
}

/* menu */
nav.main-menu ul {
float: right;
margin: 0;
padding-top: 0.63em;
padding-bottom: 2.5em;
list-style: none;
}
nav.main-menu ul li {
display: inline-block;
margin-right: 0.2rem;
margin-left: 1.5rem;
margin-top: 1.0rem;
font-weight: normal;
font-size: 100%;
line-height: 2.2;
color: #FFFFFF;
}

/* footer */
#footer {
max-width: 100%;
background-color: #000000;
color: #FFFFFF;
margin-top: 4.38em;
}
a {
margin: 0 0.94em 0 0;
}
.column1 {
padding: 1em 0em 0.88em 1.88em;
}
.column2 {
padding: 1.88em 2.19em 0.94em 0em;
}

/* Media Queries */
@media screen and (max-width: 640px) {

header nav.main-menu ul {
float: none;
text-align: center;
}
header nav.main-menu ul li {
margin-right: 1.125rem;
font-size: 100%;
line-height: 2;
}
.col-one-third { width: 100%; }
#main.row .row {
display: block;
float: none;
margin-right: auto;
margin-left: auto;
max-width: 348px;
width: 100%;
}

}

/* speel er maar veder mee */
@media screen and (max-width: 440px) {

header nav.main-menu ul li {
margin-right: 1.125rem;
font-size: 87.5%;
}

}

/* zo veel als dat je zelf wilt */
@media screen and (max-width: 380px) {

header nav.main-menu ul li {
margin-right: 0.750rem;
font-size: 75%;
line-height: 4; /* verhoog de regelhoogte i.v.m dikke vingers op een kleiner display */
}

}





/* just styles for testen */
h2 { text-align: center; }
.row-fullscreen { background: transparant; }
#main { background: transparent; }



@media print {

* {
background: transparent !important;
box-shadow: none !important;
color: #000 !important;
text-shadow: none !important;
}
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }

}




en

.grid {
padding: 20px 20px 100px 20px;
max-width: 1300px;
margin: 0 auto;
list-style: none;
text-align: center;
}

.grid li {
display: inline-block;
width: 440px;
margin: 0;
padding: 20px;
text-align: left;
position: relative;
}

.grid figure {
margin: 0;
position: relative;
}

.grid figure img {
max-width: 100%;
display: block;
position: relative;
}

.grid figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #2c3f52;
color: #ed4e6e;
}

.grid figcaption h3 {
margin: 0;
padding: 0;
color: #fff;
}

.grid figcaption span:before {
content: 'by ';
}

.grid figcaption a {
text-align: center;
padding: 5px 10px;
border-radius: 2px;
display: inline-block;
background: #ed4e6e;
color: #fff;
}

.cs-style-2 figure img {
z-index: 10;
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}

.no-touch .cs-style-2 figure:hover img,
.cs-style-2 figure.cs-hover img {
-webkit-transform: translateY(-90px);
-moz-transform: translateY(-90px);
-ms-transform: translateY(-90px);
transform: translateY(-90px);
}

.cs-style-2 figcaption {
height: 90px;
width: 100%;
top: auto;
bottom: 0;
}

.cs-style-2 figcaption a {
position: absolute;
right: 20px;
top: 30px;
}

Maar er gebeurd niet wat er zou moeten gebeuren, ik ben hier nu bijna een week mee aan het knoeien en ik raak door mijn ideen heen, met wat ik misschien fout heb gedaan of anders zou moeten doen. Kan iemand mij vertellen wat ik fout doe en hoe ik dit moet oplossen? Tot slot een afbeelding van hoe het dus niet moet: image

Ik dank voor de moeite

Reacties

  • PMPosts: 732
    Heb je een link waar deze pagina staat?
    Tevens even de juiste link zoals je het wilt gaan laten uit zien!
    If it's not fun, you're not doing it right!
  • Ik dank je voor je reaktie. Ik heb eea alleen op mijn computer staan. Ik heb gepoogd een screen shot toe te voegen, maar ik zie dat daar alleen image staat. Dus hierbij opnieuw. De bedoeling is dat de tekst onderaan de foto komt te staan en nu wordt het hele verband er uit getrokken en er gebeurd ook niets als je er met de muis over heen gaat. Verder is de tekst ook continue zichtbaar. Kort gezegd er klopt niets van, maar ik weet niet meer waar ik moet zoeken.

    Dank voor de moeite.
    Dit is de bedoeling.jpg
    2880 x 1800 - 509K
    Zo ziet het er uit.jpg
    2880 x 1800 - 765K
  • PMPosts: 879
    Kun je ons eens de goede url aangeven van tympanes.net waar je kunt zien hoe het zou moeten werken?
    Dan kunnen wij in ieder geval zien wat de bedoeling is.
    Ik neem aan dat jouw homepage nog niet echt veel data bevat; misschien kun je de totale root eens inzippen en hier als bijlage posten; als het bestand te groot is en je krijgt hem hier niet geupload,kun je hem misschien ergens op een server droppen zodat wij het kunnen downloaden.
    http://www.filedropper.com/free-file-hosting.php



  • bewerkt ma 10 nov 2014
    PMPosts: 24
    Dank voor je reaktie. Hierbij de hopelijk nu wel werkende link naar het voorbeeld: http://tympanus.net/codrops/2013/06/18/caption-hover-effects/. Verder heb ik de bestanden als zipp bijgevoegd. Ik hoop dat jullie hier genoeg aan hebben. Dank voor de moeite.
    zip
    zip
    Homepage.zip
    454K
    Homepage.zip 453.9K
  • bewerkt di 11 nov 2014
    PMPosts: 24
    Ik heb de bestanden op dit adres gezet: http://psteintj.home.xs4all.nl/ zodat ze voor een ieder teogankelijk zijn.

    Dank voor de moeite
  • bewerkt di 11 nov 2014
    PMPosts: 879
    Ik heb even in de code gekeken en op basis van jouw website ga je als volgt te werk:
    ik pik even een willekeurige div eruit:

    <div class="row">
    <div class="col-full columns">
    <div class="view animation-one">
    <img src="Foto_groot_over_ons.jpg" alt="Over ons">
    <div class="mask">
    <h2>Over ons</h2>
    <p></p>
    <a href="#" class="info"></a>
    </div>
    </div>
    </div>
    </div>

    Om deze foto nu als style 2 te krijgen doe je het volgende:

    <div class="col-full columns">
    <div class="view animation-one">
    <ul class="grid cs-style-2">
    <li>
    <figure>
    <img src="Foto_groot_over_ons.jpg" alt="Over ons">
    <figcaption class=foto_ons">
    <h3>Over Ons</h3>
    <span>Peter Steintjes</span>
    <a href="#" class="info"></a>
    </figcaption>
    </figure>
    </li>
    </ul>

    </div>
    </div>
    </div>
    Merk op dat voor voor elk image een ul, een li en een figure staat.
    Onder het image komt de figcaption die je een unieke klasse meegeeft, omdat elk image een andere breedte heeft.
    Binnen die figcaption zet je de info die je wilt zien als je mouseover gaat.
    Deze wordt afgesloten met een /figcaption, /figure, /li en tot slot de eindtag van de /ul
    In je css zet je nu een width op die unieke figcaption zodat die netjes onder de foto blijft en niet uitsteekt,

    figcaption.foto_ons {
    width: 200px; /* net zo breed als foto */
    }
    Vlg mij moetje nu al een aardig stuk in de richting komen
  • Ik ga het proberen. Dank je voor je moeite.
  • bewerkt wo 12 nov 2014
    PMPosts: 732
    Dit kan niet werken!

    Als eerste gebruik je de class cs-style-1 waar je het effect van cs-style-2 wilt uitvoeren.
    Dan zet je de grid in een colum (met ander woorden je probeert twee designs in een te zetten, maar je javascript wordt niet aangepast)?


    Wat je beter kunt doen is eens zoeken op ( metro ui tiles ) eventueel ( metro ui tiles images )
    Als je dan het uiterlijk zo hebt staan hoe je het graag wilt, dan is het een kleine aanpassing in je css zodat je figure of (div) een hover effect krijgt waardoor een figcaption of (andere div) zichtbaar wordt met een bepaalde transition.

    even stop stukje gebaseerd op je portfolio foto:


    <div class="col-full columns">
    <div class="test">
    <img src="Foto_groot_portfolio.jpg" alt="portfolio">
    <div class="mask">
    <h2>Portfolio</h2>
    <p></p>
    <a href="#" class="info">test</a>
    </div>
    </div>
    </div>


    .test {
    position:relative;
    }
    .test:hover .mask{
    transition: opacity .5s;
    opacity: 1;
    }
    .test .mask{
    background:white;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:100px;
    opacity: 0;
    transition: opacity .5s;
    }

    Uiteraard is het even spelen met je transition om eventueel een ander leuk effect te krijgen.
    Voordeel geen javascript puur css3
    nuet
    If it's not fun, you're not doing it right!
  • Nuet en Rene ik dank jullie voor de moeite. Het idee van Nuet werkte niet, dit trok alles uit elkaar. De oplossing van Rene werkt wel, ben nu aan het kijken hoe en wat ik allemaal kan aan passen.

    Ik dank jullie nogmaals voor de moeite.
  • PMPosts: 879
    goed om te horen dat je met Rene zijn idee beter uit de voeten komt; het resultaat telt immers
Login of Registreer om te reageren.