Jak uzyskać efekt przeźroczystości tylko skrawka kafelka

pytanie zadane 23 sierpnia 2017 w HTML i CSS przez TheBatman94 Początkujący (450 p.)

Dzień Dobry,

W jaki sposób mogę uzyskać taki efekt kafelka

już pomijając nawet te -45%, jak po prostu zrobić tak, aby kawałek diva był na obrazku i on byl przeźroczysty, a przy tym posiadał tekst.

Proszę o pomoc

2 odpowiedzi

odpowiedź 23 sierpnia 2017 przez Eimens Maniak (69,240 p.)

Wewnątrz tego elementu jest inny który prawdopodobnie ma przeźroczyste tło i position: absolute; bottom: 0;

i gotowe

komentarz 23 sierpnia 2017 przez TheBatman94 Początkujący (450 p.)

Niestety, tag <img ...> nie ma zamknięcia, choćbym nawet dodał </img> i wewnątrzz napisał zwykłe słowo, pojawia się ono pod zdjęciem zamiast na zdjęciu. Może masz inny pomysł ?

komentarz 23 sierpnia 2017 przez Eimens Maniak (69,240 p.)

Tak zrób diva i daj mu background (i tutaj ta grafika)

odpowiedź 23 sierpnia 2017 przez bartek-koduje Bywalec (2,490 p.)

Pozycjonowanie absolutne / relatywne + z-index
Nic trudnego.

Jak będziesz miał kłopot to pisz do mnie priv, pomogę :)

komentarz 23 sierpnia 2017 przez TheBatman94 Początkujący (450 p.)

Robiąc w ten sposób uzyskuje bardzo paskudny efekt... Najeżdżam myszką na mój kafelek odpowiadający za tą przeźroczystość na obrazku i w tym samym momencie podświetla się obrazek obok, który w ogóle nie ma żadnego powiązania z tym.

O to SS:

komentarz 23 sierpnia 2017 przez ProgramistaStepek Nałogowiec (27,020 p.)

Talk is cheap. Show me the code.

komentarz 23 sierpnia 2017 przez bartek-koduje Bywalec (2,490 p.)

Dla diva ustaw position relative.
Dla span ustaw position absolute ale z wysokoscia i szerokoscia 100%.

Dla przykładu zobacz tutaj:
https://jsfiddle.net/3asg3d3c/3/

komentarz 24 sierpnia 2017 przez TheBatman94 Początkujący (450 p.)

koledzy podrzucam kod

!doctype html>
<html>
<head>
    <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>B&W Vending</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<!--[if lte IE 8]>
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
<!--<![endif]-->

</head>

<!--

<div class="container">
	
		<div class="WidgetExample">
			<div class="SpaceForArrow">
				<<
			</div>
			<div class="SpaceForWidgets">
				<div class="Tile">
				</div>
				<div class="Tile">
				</div>
				<div class="Tile">
				</div>
				<div class="Tile xs">
				</div>
			</div>
			<div class="SpaceForArrow">
				<<
			</div>
		</div>

</div>

-->
<body>

<style>
	body {
		height:220px;
		width:100%;
		margin:0 auto;
	}
	
	@media screen and (max-width: 35em) {
		.pure-u-hidden { 
			display:none;
		}
	}
	
	@media screen and (max-width: 40em) {
		.pure-u-sm-hidden { 
			display:none;
		}
	}
	
	@media screen and (max-width: 48em) {
		.pure-u-sm-hidden { 
			display:none;
		}
	}
	
	@media screen and (max-width: 64em) {
		.pure-u-md-hidden { 
			display:none;
		}
	}
	
	@media screen and (max-width: 80em) {
		.pure-u-lg-hidden { 
			display:none;
		}
	}
	
	.blog {
	max-width:980px;
	margin:0 auto;
}
	
.foto:hover {
	filter: brightness(50%);
	cursor: pointer;
}






.footer-f {
	height: 20px;
    opacity: 0.5;
    border: 1px solid #fff;
    display:block;
    padding:55px;
	width: 6.5%;
    position:absolute;
    background:#fff;
}

</style>

<div class="container" style="height:200px;">
	<div class="pure-g" >
	
		<div class="pure-u-hidden pure-u-sm-1-3 pure-u-md-1-4 pure-u-lg-1-6 pure-u-xl-1-8 foto "> 
			<img src="ladna_pani.jpg" alt="Smiley face" class="pure-img" >
		</div>
		
		<div class="pure-u-1-2 pure-u-sm-1-3 pure-u-md-1-4 pure-u-lg-1-6 pure-u-xl-1-8 foto "> 
			<img src="ladna_pani.jpg" alt="Smiley face" class="pure-img"> 
		</div>
		
		<div class="pure-u-1-2 pure-u-sm-1-3 pure-u-md-1-4 pure-u-lg-1-6 pure-u-xl-1-8 foto "> 
			<img src="ladna_pani.jpg" alt="Smiley face" class="pure-img">
		</div>
		
		<div class="pure-u-1 pure-u-sm-hidden pure-u-md-1-4 pure-u-lg-1-6 pure-u-xl-1-8 foto ">
			<img src="ladna_pani.jpg" alt="Smiley face" class="pure-img" > 
		</div>
		
		<div class="pure-u-1 pure-u-sm-hidden pure-u-md-hidden pure-u-lg-1-6 pure-u-xl-1-8 foto "> 
			<img src="ladna_pani.jpg" alt="Smiley face" class="pure-img">
			<span class="footer-f" style="top: 300px; right: 0px;">blablabla</span>
		</div>
		
		<div class="pure-u-1 pure-u-sm-hidden pure-u-md-hidden pure-u-lg-1-6 pure-u-xl-1-8 foto"> 
			<img src="ladna_pani.jpg" alt="Smiley face" class="pure-img" > 
			<span class="footer-f" style="top: 250px; right: 240px;"></span>
		</div>
		
		<div class="pure-u-1 pure-u-sm-hidden pure-u-md-hidden pure-u-lg-hidden pure-u-xl-1-8 foto ">
			<img src="ladna_pani.jpg" alt="Smiley face" class="pure-img">
		</div>
		
		<div class="pure-u-1 pure-u-sm-hidden pure-u-md-hidden pure-u-lg-hidden pure-u-xl-1-8 foto "> 
			<img src="ladna_pani.jpg" alt="Smiley face" class="pure-img" >
		</div>
		
	</div>
</div>


<style>








</style></body>
</html>

komentarz 24 sierpnia 2017 przez TheBatman94 Początkujący (450 p.)

Bartku, dziękuje za odpowiedź, teraz działa, o to efekt :)

komentarz 24 sierpnia 2017 przez bartek-koduje Bywalec (2,490 p.)

1. W kodzie brakuje "<" w pierwszej lini przy deklaracji DOCTYPE.
2. Style umieść w znaczniku <head>
3. Style na dole powinieneś wywalić
4. Staraj się unikać stylowania inline