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
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
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:
en mijn css bestanden:
en
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:
Ik dank voor de moeite
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 © 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:
Ik dank voor de moeite
Login of Registreer om te reageren.
Reacties
Tevens even de juiste link zoals je het wilt gaan laten uit zien!
Dank voor de moeite.
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
Dank voor de moeite
ik pik even een willekeurige div eruit:
Om deze foto nu als style 2 te krijgen doe je het volgende: 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, Vlg mij moetje nu al een aardig stuk in de richting komen
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:
Uiteraard is het even spelen met je transition om eventueel een ander leuk effect te krijgen.
Voordeel geen javascript puur css3
Ik dank jullie nogmaals voor de moeite.