Προς το περιεχόμενο

Προτεινόμενες αναρτήσεις

Δημοσ.

Έχω βρει το εξής στο codepen: https://codepen.io/JoostKiens/pen/sIwmb
... το οποίο με εξυπηρετεί (ειδικά από το γεγονός ότι έχει top left τοποθέτηση και δεν είναι flash ή gif).

Όλα ωραία, εκτός από το γεγονός ότι δεν έχω καταφέρει να βάλω εικόνα μέσα στο "τρίγωνο", που να φαίνεται ένα μέρος της όταν είναι σε κανονική κατάσταση και όταν κάνεις hover να φαίνεται η υπόλοιπη.
Προφανώς θα χρειαστεί να φτιάξω μια εικόνα 240x240px (που είναι το μέγεθος σε hover κατάσταση), όμως δεν ξέρω πως να την εφαρμόσω χωρίς να χαλάει το υπόλοιπο λευκό "χαρτί" και οι σκιές.

Καμιά ιδέα; :-)

Δημοσ.

Καλησπέρα,

 

HTML

<div class="curl">
	<img src="http://tigresse004.t.i.pic.centerblog.net/t7hiim1o.jpg">
</div>

CSS

.curl {
    width: 120px;
    height: 120px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow: hidden;
    background: white;
    box-shadow: 0 0 10px grey;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.curl:hover {
    width: 150px;
    height: 150px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    box-shadow: 10px 10px 50px grey;
}

.curl:after {
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: rotate(45deg) translateX(70%) scale(1.4);
    background: #afafaf;
    background: -moz-linear-gradient(left, #afafaf 0%, #ffffff 29%);
    background: -webkit-linear-gradient(left, #afafaf 0%,#ffffff 29%);
    background: linear-gradient(to right, #afafaf 0%,#ffffff 29%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afafaf', endColorstr='#ffffff',GradientType=1 );
}

:-D

  • Like 2
Δημοσ.

Ειναι λιγο αναπηρο οπως το εφτιαξε. Το ασπρο που εμφανιζεται εκει ειναι στην ουσια ενα gradient.

 

background : 
linear-gradient(
135deg, 
#fff, 
#f3f3f3 45%, 
#ddd 50%, 
#aaa 50%, 
#bbb 56%, 
#ccc 62%, 
#f3f3f3 80%,
#fff 100%
);
 
Οποτε δε νομιζω να μπορεις να βαλεις εικονα. Λιγο ακυρο..
 
Αα.. το εκανε ο τζοτζοσ απο πανω.. δε σκεφτηκα να βαλω εικονα στην html μονο με background-image το ειδα :(((
Δημοσ.

και σε background-image βγαίνει!

 

HTML

<div class="curl"></div>

CSS

.curl {
    width: 120px;
    height: 120px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow: hidden;
    background-image: url("http://tigresse004.t.i.pic.centerblog.net/t7hiim1o.jpg");
    background-color: white;
    box-shadow: 0 0 10px grey;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.curl:hover {
    width: 150px;
    height: 150px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    box-shadow: 10px 10px 50px grey;
}

.curl:after {
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: rotate(45deg) translateX(70%) scale(1.4);
    background: #afafaf;
    background: -moz-linear-gradient(left, #afafaf 0%, #ffffff 29%);
    background: -webkit-linear-gradient(left, #afafaf 0%,#ffffff 29%);
    background: linear-gradient(to right, #afafaf 0%,#ffffff 29%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afafaf', endColorstr='#ffffff',GradientType=1 );
}

:-D 

  • Like 2

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
  • Δημιουργία νέου...