Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][CSS]Przezroczystosc textu problem
matti9410
post
Post #1





Grupa: Zarejestrowani
Postów: 70
Pomógł: 0
Dołączył: 10.07.2013

Ostrzeżenie: (0%)
-----


Witam mam problem, chciałbym aby tylko obrazek miał zmniejszone krycie natomiast napis również dziedziczy zmniejszone krycie.
Kod
.img-height {
    position: static;
    display: block;
}

.img-height:hover {
    background-color: #fff;
    opacity: 0.4;
    padding: 0;
    margin:0;
}

.img-container {
    display: table;
    width: 100%;
    height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.img-text:hover h1 {
    color: #000;
    display: inline;
    display: table-cell;
    vertical-align: middle;
    text-transform: uppercase;
}

.img-8 {
    background: url(../images/img-8.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
}

.img-9 {
    background: url(../images/img-9.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
}

.img-10 {
    background: url(../images/img-10.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 400px;
}

.img-text h1{
    display:none;
}


html

  1. <div class="container-fluid text-center">
  2. <div class="row">
  3. <a href="">
  4. <div class="col-sm-4 img-height img-8 img-text">
  5. <div class="img-container">
  6. <h1>Bla</h1>
  7. </div>
  8. </div>
  9. </a>
  10. <a href="">
  11. <div class="col-sm-4 img-height img-9 img-text">
  12. <div class="img-container">
  13. <h1>Bla</h1>
  14. </div>
  15. </div>
  16. </a>
  17. <a href="">
  18. <div class="col-sm-4 img-height img-10 img-text">
  19. <div class="img-container">
  20. <h1>Bla</h1>
  21. </div>
  22. </div>
  23. </a>
  24. </div>
  25. </div>


mam to
(IMG:http://wstaw.org/m/2016/08/10/Bez_nazwy-2.jpg)
chce to
(IMG:http://wstaw.org/m/2016/08/10/Bez_nazwy-1.jpg)
Go to the top of the page
+Quote Post
luki100011
post
Post #2





Grupa: Zarejestrowani
Postów: 243
Pomógł: 20
Dołączył: 20.04.2004
Skąd: Wielkopolska

Ostrzeżenie: (0%)
-----


Zobacz jak to jest rozwiązane na przykład tutaj - struktura HTML-a i które elementy mają opacity.

https://www.impressivewebs.com/demo-files/css-opacity/
Go to the top of the page
+Quote Post
trueblue
post
Post #3





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


http://forum.php.pl/index.php?showtopic=251338
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 22.08.2025 - 16:30