DIV Oculta com CSS

Para Ocultar um elemento com o uso CSS, há o parametro visibility, para controla-lá.

Basta acrescentar o trecho visibility: hidden; no parametro style ou no arquivo de importação do CSS.

Exemplo:
Artes Marciais
<div class="separator" style="clear: both; text-align: center; visibility: hidden; ">
<a href="http://3.bp.blogspot.com/-Qf09lRLR-68/Uh5Xxm1qs6I/AAAAAAAADYw/1SyOys0iqF4/s1600/1146197_363128123819959_251938500_o.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-Qf09lRLR-68/Uh5Xxm1qs6I/AAAAAAAADYw/1SyOys0iqF4/s200/1146197_363128123819959_251938500_o.jpg" />
</a>
</div>
Curiosidade
<div class="separator" style="clear: both; text-align: center;"> <a href="http://2.bp.blogspot.com/-FV0E-CPM9Ac/UuooloS13oI/AAAAAAAADjs/9HKWax_fiVg/s1600/coruja.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em; visibility: hidden;"> <img border="0" src="http://2.bp.blogspot.com/-FV0E-CPM9Ac/UuooloS13oI/AAAAAAAADjs/9HKWax_fiVg/s320/coruja.gif" /> </a> </div>
CSS
<div class="separator" style="clear: both; text-align: center;"> <a href="http://4.bp.blogspot.com/-kCqQh4QmNN0/Uuoup6J_E2I/AAAAAAAADkk/CclUO96IrHE/s1600/CSS-Down1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;visibility: hidden;"> <img border="0" src="http://4.bp.blogspot.com/-kCqQh4QmNN0/Uuoup6J_E2I/AAAAAAAADkk/CclUO96IrHE/s400/CSS-Down1.jpg" /> </a></div>
HTML
<div class="separator" style="clear: both; text-align: center;"> <a href="http://2.bp.blogspot.com/-9ukposbe_Qo/UuouqHvYslI/AAAAAAAADkg/hdVYkr4nokc/s1600/html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;visibility: hidden;"> <img border="0" src="http://2.bp.blogspot.com/-9ukposbe_Qo/UuouqHvYslI/AAAAAAAADkg/hdVYkr4nokc/s400/html.jpg" /> </a></div>
Idéia
<div class="separator" style="clear: both; text-align: center;"> <a href="http://1.bp.blogspot.com/-Z4YwSsx2gFQ/Uuoq-X2cVnI/AAAAAAAADj4/VLS2d_TlnUY/s1600/bright-idea.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; visibility: hidden;"> <img border="0" src="http://1.bp.blogspot.com/-Z4YwSsx2gFQ/Uuoq-X2cVnI/AAAAAAAADj4/VLS2d_TlnUY/s320/bright-idea.jpg" /> </a> </div>
<div class="separator" style="clear: both; text-align: center;"> <a href="http://1.bp.blogspot.com/-X4D9SZpDoks/Uuoq-RH_AII/AAAAAAAADj8/o7ZRGHjVhcg/s1600/duvida.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; visibility: hidden;"> <img border="0" src="http://1.bp.blogspot.com/-X4D9SZpDoks/Uuoq-RH_AII/AAAAAAAADj8/o7ZRGHjVhcg/s320/duvida.jpg" /> </a></div>
<div class="separator" style="clear: both; text-align: center;"> <a href="http://1.bp.blogspot.com/-EOWmIgPXcuQ/Uuoq-uV-vRI/AAAAAAAADkA/RsxeR06k4xM/s1600/ideias.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; visibility: hidden;"> <img border="0" src="http://1.bp.blogspot.com/-EOWmIgPXcuQ/Uuoq-uV-vRI/AAAAAAAADkA/RsxeR06k4xM/s320/ideias.jpg" /> </a></div>
Investimentos
<div class="separator" style="clear: both; text-align: center;"> <a href="http://3.bp.blogspot.com/-tqRnR62Bzp0/TjlMa26C9FI/AAAAAAAABxs/ftAb8N70Y-8/s1600/155004.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;visibility: hidden;"> <img border="0" src="http://3.bp.blogspot.com/-tqRnR62Bzp0/TjlMa26C9FI/AAAAAAAABxs/ftAb8N70Y-8/s320/155004.jpg" /> </a> </div>
<div class="separator" style="clear: both; text-align: center;"> <a href="http://1.bp.blogspot.com/-IKWz6CIwQuk/TjlMt1CvYwI/AAAAAAAABzA/o2VrHOUv6eQ/s1600/inflacao1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;visibility: hidden;"> <img border="0" src="http://1.bp.blogspot.com/-IKWz6CIwQuk/TjlMt1CvYwI/AAAAAAAABzA/o2VrHOUv6eQ/s320/inflacao1.jpg" /> </a></div>
<div class="separator" style="clear: both; text-align: center;"> <a href="http://1.bp.blogspot.com/-zw79Y_kvB7s/TjlMtveiSxI/AAAAAAAABy8/Qg6SHqs8GL8/s1600/inflacao.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;visibility: hidden;"> <img border="0" src="http://1.bp.blogspot.com/-zw79Y_kvB7s/TjlMtveiSxI/AAAAAAAABy8/Qg6SHqs8GL8/s320/inflacao.jpg" /> </a></div>
<div class="separator" style="clear: both; text-align: center;"> <a href="http://2.bp.blogspot.com/-nWi8LWdxv4U/TjlNaHz0hEI/AAAAAAAAB0U/nC1bml1UI0E/s1600/PIB.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;visibility: hidden;"> <img border="0" src="http://2.bp.blogspot.com/-nWi8LWdxv4U/TjlNaHz0hEI/AAAAAAAAB0U/nC1bml1UI0E/s320/PIB.jpg" /> </a> </div>
<div class="separator" style="clear: both; text-align: center;"> <a href="http://1.bp.blogspot.com/-sZT79S4mF0E/TjlMnMZHjxI/AAAAAAAAByU/9JPG5z0SJ5E/s1600/dinheiro1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;visibility: hidden;"> <img border="0" src="http://1.bp.blogspot.com/-sZT79S4mF0E/TjlMnMZHjxI/AAAAAAAAByU/9JPG5z0SJ5E/s320/dinheiro1.jpg" /> </a></div>
Latex
<div class="separator" style="clear: both; text-align: center; visibility: hidden;"> <a href="http://3.bp.blogspot.com/-Ygi8fyz4jvk/Uuok5kS8tJI/AAAAAAAADjU/6BwcFk8eXcs/s1600/latex.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" src="http://3.bp.blogspot.com/-Ygi8fyz4jvk/Uuok5kS8tJI/AAAAAAAADjU/6BwcFk8eXcs/s320/latex.jpg" /> </a> </div>
Linux
<div class="separator" style="clear: both; text-align: center;"> <a href="http://3.bp.blogspot.com/-0JfR__WG1ww/UuomzSp8XVI/AAAAAAAADjg/xWceEWX9CDQ/s1600/19816-linux-s-.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; visibility: hidden;"> <img border="0" src="http://3.bp.blogspot.com/-0JfR__WG1ww/UuomzSp8XVI/AAAAAAAADjg/xWceEWX9CDQ/s320/19816-linux-s-.png" /> </a> </div>
Música
<div class="separator" style="clear: both; text-align: center;"> <a href="http://2.bp.blogspot.com/-gshwBV5PJDk/UuozadL04iI/AAAAAAAADlA/voQDKEK7WFs/s1600/4443937.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;visibility: hidden;"> <img border="0" src="http://2.bp.blogspot.com/-gshwBV5PJDk/UuozadL04iI/AAAAAAAADlA/voQDKEK7WFs/s320/4443937.jpg" /> </a></div>
<div class="separator" style="clear: both; text-align: center;"> <a href="http://1.bp.blogspot.com/-EMIRYXY3iQg/UuozaqTICwI/AAAAAAAADlE/-fRRKP4nzOY/s1600/Clave.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;visibility: hidden;"> <img border="0" src="http://1.bp.blogspot.com/-EMIRYXY3iQg/UuozaqTICwI/AAAAAAAADlE/-fRRKP4nzOY/s320/Clave.jpg" /> </a> </div>
<div class="separator" style="clear: both; text-align: center;"> <a href="http://1.bp.blogspot.com/-Ol_0mlTpum8/UuozavOxYzI/AAAAAAAADlI/HiJrNgkLoA4/s1600/m%C3%BAsica-thumb743512.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;visibility: hidden;"> <img border="0" src="http://1.bp.blogspot.com/-Ol_0mlTpum8/UuozavOxYzI/AAAAAAAADlI/HiJrNgkLoA4/s320/m%C3%BAsica-thumb743512.jpg" /> </a></div>
<div class="separator" style="clear: both; text-align: center;"> <a href="http://3.bp.blogspot.com/-NpMeToaTmWs/UuozbPO04kI/AAAAAAAADlY/oKCh7B6KjG8/s1600/notas-da-musica-7544001.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;visibility: hidden;"> <img border="0" src="http://3.bp.blogspot.com/-NpMeToaTmWs/UuozbPO04kI/AAAAAAAADlY/oKCh7B6KjG8/s320/notas-da-musica-7544001.jpg" /> </a></div>
Utilidade Publica
<div class="separator" style="clear: both; text-align: center;"> <a href="http://1.bp.blogspot.com/-w_DW7c0zYNA/UuosiyxYyyI/AAAAAAAADkU/izkIhv2EcLM/s1600/UtilidadePblica.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;visibility: hidden;"> <img border="0" src="http://1.bp.blogspot.com/-w_DW7c0zYNA/UuosiyxYyyI/AAAAAAAADkU/izkIhv2EcLM/s320/UtilidadePblica.jpg" /> </a> </div>

Para quê serve tal recurso? A sua imaginação é o limite!!! Neste poste estou utilizando para exibir a imagem em miniatura, no Facebook, em dispositivos portáteis, twitter, e nas publicações top 5.

Comentários