1
Wir vermuten hier eine Website zu erstellen: http://desertcinema.com/HTML - Hiding Bilder ohne sie Besatzungs versteckten Raum
Und dann verstecke ich die Elemente mit display: none;
Aber aus irgendeinem Grund haben sie mich mit einem großen Leerzeichen verlassen.
Hier ist der HTML:
<h1>OUR PORTFOLIO</h1><div class="subtext-top">CLIENT-FOCUSED MEDIA PRODUCTION</div><div class="line-dark1"></div>
</div>
</div></div><div class="row">
<div class="sixteen columns wpb_column column_container" >
<div class="wpb_wrapper ">
<div class="clear"></div>
<div class="container">
<div class="sixteen columns">
<div id="portfolio-filter">
<ul id="filter">
<li><a href="#" class="current" data-filter="*" title=""></a></li><li><a href="#" data-filter=".photography" title="">PHOTOGRAPHY</a></li><li><a href="#" data-filter=".video-production" title="">VIDEO PRODUCTION</a></li></ul>
</div>
</div>
</div>
<ul class="portfolio-wrap isotope">
<li class="portfolio-box video-production ">
<a class="vimeo" href="https://vimeo.com/169312968&autoplay=true" title="iLiveAccountable">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/ilive-1-31nfbcra0szpkeu8rwwxz4.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>iLiveAccountable</h4>
</a>
</li>
<li class="portfolio-box ">
<a class="youtube" href="https://www.youtube.com/watch?v=Fg7iiQ0XGGI&autoplay=1" title="SKRE Extreme Mountain Gear">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SK-31fqrlv4u0io2bmbt3zfgg.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>SKRE Extreme Mountain Gear</h4>
</a>
</li>
<li class="portfolio-box photography">
<a class="gallery" rel="gallery1" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4bav1hxsgwj54nvaww.jpg" title="Concealment">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Concealment</h4>
</a>
</li>
<li class="portfolio-box video-production " style="width:338px">
<a class="youtube" href="https://www.youtube.com/watch?v=hdxU95byX9E&feature=youtu.be&autoplay=1" title="Why Gold? Why Now?">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/ok-30qtm6hhkfhai4j2g294ao.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Why Gold? Why Now?</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:339px">
<a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img11-30nswp3smpn5synh64xzwg.jpg" title="Random Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img11-30nswp3s8gt37dvu66hqtc.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Random Photography</h4>
</a>
</li>
<li class="portfolio-box photography ">
<a class="gallery3" rel="gallery3" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img17-30nswqv4et3spn3ok9j6dc.jpg" title="Sports Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img17-30nswqv40k9q42c1kb2xa8.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Sports Photography</h4>
</a>
</li>
<li class="portfolio-box photography ">
<a class="gallery4" rel="gallery4" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img5-30nswmywbqkyk4ynmesum8.jpg" title="Wedding Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img5-30nswmyvxhqvyk70mgclj4.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Wedding Photography</h4>
</a>
</li>
<li class="portfolio-box video-production ">
<a class="youtube" href="https://www.youtube.com/watch?v=hbEgxfr3rDE&autoplay=1" title="Why Ashcreek Ranch Academy">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/22-30nstcqe466oswsn6bdla8.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Why Ashcreek Ranch Academy</h4>
</a>
</li><li class="portfolio-box video-production ">
<a class="youtube" href="https://www.youtube.com/watch?v=MZ-pxEUw6WU&autoplay=1" title="Gold Puplic Investor Promo">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/21-30nssg6u6e4x0cgueyhrls.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Gold Puplic Investor Promo</h4>
</a>
</li><li class="portfolio-box video-production ">
<a class="youtube" href="https://www.youtube.com/watch?v=jbmRPENVwLw&autoplay=1" title="Ministering Angels">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/19-30nsqgtk87dygshnmxhc00.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Ministering Angels</h4>
</a>
</li><li class="portfolio-box video-production ">
<a class="youtube" href="https://www.youtube.com/watch?v=SsAgvJFGiGA&autoplay=1" title="Amazing Aerial Video Over the West">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/20-30nsrfvkzu3hubqw3m29s0.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Amazing Aerial Video Over the West</h4>
</a>
</li><li class="portfolio-box video-production ">
<a class="youtube" href="https://www.youtube.com/watch?v=So4E51xqQB4&autoplay=1" title="Campaign">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/18-30nmv08fhqj2dmq5iibj7k.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Campaign</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery" rel="gallery1" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/Mike-Full-Draw-30sp495yqivl82ubkxq5mo.jpg" title="Concealment">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/SKRE-9-30sp4baun93pvbri4pf1ts.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Concealment</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img16-30nswq8i7cfutedbmxlwcg.jpg" title="Random Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img11-30nswp3s8gt37dvu66hqtc.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Random Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img13-30nswphd5l8q53w3bqhyps.jpg" title="Random Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img11-30nswp3s8gt37dvu66hqtc.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Random Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img15-30nswpzgirdh9avkv78l4w.jpg" title="Random Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Random Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img8-30nswo84qnwucmfdh2neo0.jpg" title="Random Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Random Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img7-30nswnz322ugsixmpca3gg.jpg" title="Random Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Random Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img6-30nswnlij78wgdp0jqq4n4.jpg" title="Random Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Random Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img4-30nswmgsykg7fxz62y2874.jpg" title="Random Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Random Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img2-30nswlpnwt92rnhxrqyakg.jpg" title="Random Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Random Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img1-30nswl7kjn4bngig8a7o5c.jpg" title="Random Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Random Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img24-30nswsqz173medarc9b0g0.jpg" title="Random Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Random Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img22-30nsws8vo0yva6b9sske0w.jpg" title="Random Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Random Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img20-30nswrm9gkaxdxkwvgn400.jpg" title="Random Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Random Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img19-30nswrd7rz8jtu363q9ssg.jpg" title="Random Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Random Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img18-30nswr463e669qlfbzwhkw.jpg" title="Random Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Random Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery2" rel="gallery2" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img16-30nswq8i7cfutedbmxlwcg.jpg" title="Random Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img9-30nswoh6f8z7wpx48t0pvk.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Random Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery3" rel="gallery3" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img3-30nswm38foun3sqjxci9ds.jpg" title="Sports Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img17-30nswqv40k9q42c1kb2xa8.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Sports Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery3" rel="gallery3" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img21-30nswrvb55day12nn70f7k.jpg" title="Sports Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img17-30nswqv40k9q42c1kb2xa8.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Sports Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery4" rel="gallery4" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img23-30nswsmg6wkfmbjvye4cu8.jpg" title="Wedding Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img5-30nswmyvxhqvyk70mgclj4.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Wedding Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery4" rel="gallery4" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img12-30nswpcubapjd257xvbb40.jpg" title="Wedding Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img5-30nswmyvxhqvyk70mgclj4.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Wedding Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery4" rel="gallery4" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img14-30nswpqeu6b3p7du3gv9xc.jpg" title="Wedding Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img5-30nswmyvxhqvyk70mgclj4.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Wedding Photography</h4>
</a>
</li>
<li class="portfolio-box photography" style="width:335px;display:none;">
<a class="gallery4" rel="gallery4" href="http://desertcinema.com/wp-content/uploads/bfi_thumb/img10-30nswouqy4ks8v5qeekoow.jpg" title="Wedding Photography">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/img5-30nswmyvxhqvyk70mgclj4.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>Wedding Photography</h4>
</a>
</li>
</ul>
</div>
</div>
Wie kann ich die Elemente hier richtig verstecken, ohne dass ich einen großen Raum zu leben?
Sie können das inspect-Element mit dem inspect-Elementwerkzeug von Chrome verwenden.
haben Sie versucht 'display: none! Wichtig'? –
Chrom. Überprüfen Sie es in Chrome –